Question

我在html中有一个滑块，

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

我希望它随着音频播放而移动，并且也是“可寻找的”。＆＃39;

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

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中的音频搜索栏使用滑块

1 个答案: