使用滑块的 JS 中的音频搜索栏

Question

我在 html、

中有一个滑块

 <div id="seekslider" style="width: 75%; margin: 0 auto; margin-top: 10px; display: inline-block;"></div>

并且我希望它随着音频播放而移动，并且也是 'seek-able.'

我知道我做错了什么..这是我到目前为止的一团糟：

function intializePlayer(){
audio = document.getElementById("player");
playbtn = document.getElementById("controlTogglePlay");
seekslider = document.getElementById("seekslider");
playbtn.addEventListener("click",playPause,false);
seekslider.addEventListener("change",audioSeek,false);
audio.addEventListener("timeupdate",seektimeupdate,false);
seekslider = $("#seekslider");
seekslider.slider({
    orientation: "horizantal",
    value: 25,
    range: "min",
    min: 0,
    max: 100,
    step: 1,
    slide: function(event, ui) {
        $("#seekslider.value").prop("seekslider", ui.value / 100);
        updateCookies();
        }
    });
}

window.onload = intializePlayer;

function audioSeek(){
    var seekto = audio.duration * (seekslider.value / 100);
    audio.currentTime = seekto;
}
function seektimeupdate(){
    var nt = audio.currentTime * (100 / audio.duration);
    seekslider.value = nt;
}

我做错了什么？

Answer 1

试试这个代码：

function intializePlayer(){
    audio = document.getElementById("player");
    playbtn = document.getElementById("controlTogglePlay");
    seekslider = document.getElementById("seekslider");
    playbtn.addEventListener("click",playPause,false);
    audio.addEventListener("timeupdate",seektimeupdate, false);
    seekslider = $("#seekslider");
    seekslider.slider({
        orientation: "horizantal",
        value: 25,
        range: "min",
        min: 0,
        max: 100,
        step: 1,
        slide: function(event, ui) { // CHANGED HERE
                var seekto = audio.duration * (ui.value / 100);
                console.log('seekto:', seekto); // check console to see if this is getting called.    
                audio.currentTime = seekto;
        }
    });
}

window.onload = intializePlayer;

// CHANGED HERE
function seektimeupdate(){
    var nt = audio.currentTime * (100 / audio.duration);
    console.log('nt:', nt); // check console to see if this is getting called.    
    seekslider.slider( "value", nt); // CHANGED HERE
}

~~问题在第 8 行：~~

seekslider = $("#seekslider");

现在 seekslider 从 htmlElement 变成 Jquery 对象，

两种解决方法，

为 jquery 对象使用不同的名称，例如 'jSeekslider'

将 audioSeek() 和 seektimeupdate() 代码更改为...

function audioSeek(){ audio.currentTime = audio.duration * (seekslider[0].value / 100); } function seektimeupdate(){ seekslider[0].value = audio.currentTime * (100 / audio.duration); }

使用滑块的 JS 中的音频搜索栏

Audio seek bar in JS using slider

javascript

jquery

html5-audio