检测用户拖动范围类型输入
Detecting user dragging range type input
我正在创建一个简单的 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" 如果音频正在播放(播放按钮已被点击)则为真,音频暂停时为假(播放按钮还没有被点击,或者暂停按钮被点击).
但是,在播放音频时单击搜索栏(完全不移动鼠标)将不起作用。
$("#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 音频播放器。我希望用户能够将搜索栏滑块拖动到他们想要的任何时间,但是使用我当前拥有的代码,当 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" 如果音频正在播放(播放按钮已被点击)则为真,音频暂停时为假(播放按钮还没有被点击,或者暂停按钮被点击).
但是,在播放音频时单击搜索栏(完全不移动鼠标)将不起作用。
$("#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);
});