Seek滑块不移动也不更新搜索

时间:2014-06-14 13:22:10

标签: javascript jquery

关于http://www.developphp.com/view.php?tid=1402的视频教程,我修改了变量并转换为jQuery。 Seek Slider似乎不起作用,我在控制台上没有收到任何错误消息。

当我移动Slider时,它会触发mousemove或mouseup但不移动Slider的事件。即使我手动将滑块移动到某个位置,它仍然不会更新搜索。

的JavaScript

var audio, jPlay, jMute, seekslider, seeking = false, seekto, jVolume;
function init_audio_player(){
    audio = new Audio();
    audio.src = "/samples/xxxx.mp3";

    // Set object references
    seekslider = document.getElementById("seekslider");

    seekslider.addEventListener("mousemove", function(event){ seek(event); });
    seekslider.addEventListener("mouseup", function(){ seeking = false; });

    function seek(event){
        if(seeking){
            seekslider.value = event.clientX - seekslider.offsetLeft;
            seekto = audio.duration * (seekslider.value / 100);
            audio.currentTime = seekto;
        }
    }

}
window.addEventListener("load", init_audio_player);

HTML

<a id="jPlay" class="icon-play"></a>
<a id="jStop" class="icon-stop"></a>
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<input id="jVolume" type="range" min="0" max="100" value="100" step="1">

1 个答案:

答案 0 :(得分:0)

名为seeking的变量始终为false,至少根据您在此处显示的代码而定。所以你的seek()函数从不做任何事情。请注意,在本教程中,有mousedown的监听器设置了seeking = true;