编程语言
首页 > 编程语言> > javascript-检测用户拖动范围类型输入

javascript-检测用户拖动范围类型输入

作者:互联网

我正在创建一个简单的HTML5音频播放器.我希望用户能够将搜索栏滑块拖动到所需的任何时间,但是使用我当前拥有的代码,当触发timeupdate时,滑块会返回到原始位置(1).当用户拖动滑块时,如何禁止搜索栏更新?

$("#html5audio_seek").bind("change", function() {
    html5audio.currentTime = $(this).val();
    $("#html5audio_seek").attr("max", html5audio.duration);
});
html5audio.addEventListener('timeupdate',function (){
    curtime = parseInt(html5audio.currentTime, 10);
$("#html5audio_seek").attr("value", curtime);
});

解决方法:

像注释中建议的@Zeratops一样进行了修改,修改后的代码来自this answer.

添加了一个布尔型“ playbool”,如果正在播放音频(单击了播放按钮),则为true;如果暂停音频(尚未单击播放按钮,或单击了暂停按钮),则为false.

但是,在播放音频时单击搜索栏(完全不移动鼠标)将不起作用.

$("#html5audio_seek").on("mouseup", function () {
    html5audio.currentTime = $("#html5audio_seek").val();
    if (playbool) {html5audio.play();}
});

$("#html5audio_seek").on("mousedown", function () {
    if (playbool) {html5audio.pause();}
});

html5audio.addEventListener('timeupdate',function (){
    curtime = parseInt(html5audio.currentTime, 10);
    $("#html5audio_seek").attr("value", curtime);
});

标签:html5,html5-audio,javascript,jquery
来源: https://codeday.me/bug/20191120/2046491.html