javascript - slider 单击时的jQuery音频持续时间更改

Question

我注意到以下代码在台式机和笔记本电脑上运行良好，但在我的 Android 手机或其他移动设备上运行良好，可以在用户单击 slider 时更改歌曲的持续时间:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div id="timeline-box">
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1"><br>           
    </div>

    **//jQuery to detect when user changes the timeline with the seekslider
    $(document).ready(function(){
      $("#seekslider").mouseup(function(e){
                var leftOffset = e.pageX - $(this).offset().left;
                var songPercents = leftOffset / $('#seekslider').width();
                audio.currentTime = songPercents * audio.duration;
            }); 
    });**

如果有人可以通过单击 jQuery 或 Javascript 中的 slider 时的持续时间更改来帮助我解决此问题，我将不胜感激。

Answer 1

您不能在移动设备上使用 mouseup。而是使用 touchend。这基本上相当于mouseup。也使用 .on 代替包装函数。通过这样做，您可以将多个监听器绑定(bind)到同一个元素(touchend 和 mouseup)。

//jQuery to detect when user changes the timeline with the seekslider
$(document).ready(function(){
    $("#seekslider").on('mouseup touchend',function(e){
        var leftOffset = e.pageX - $(this).offset().left;
        var songPercents = leftOffset / $('#seekslider').width();
        audio.currentTime = songPercents * audio.duration;
     }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div id="timeline-box">
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1"><br>           
    </div>