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

Detecting user dragging range type input

本文关键字：类型 输入 范围 拖动 用户 检测      更新时间：2023-09-26

我正在创建一个简单的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修改，修改了此答案中的代码。

添加了布尔值"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);
});
相关文章：