滑块上的jQuery音频时间持续时间更改单击

Question

我注意到以下代码在台式机和笔记本电脑上运行正常，但在我的Android手机或其他移动设备上运行不正常，以便在用户点击滑块时更改歌曲的持续时间：

<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中的滑块时持续时间更改。

Answer 1

你不能在手机上使用mouseup。而是使用touchend。这基本上相当于mouseup。也可以使用.on而不是包装函数。通过这样做，您可以将多个侦听器绑定到同一个元素（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>

Answer 2

type = range滑块有2个事件，输入和更改。如果您没有使用type = range，那么使用鼠标或触摸事件可能会很有用。

$("#seekslider").on("input",function(e){
    audio.currentTime = this.value * audio.duration;
})

使用合理的最大最大值和步长，这样您就不需要做太多的数学运算。

<input id="seekslider" type="range" min="0" max="1" value="0" step=".001">

Answer 3

实际上，在纯Javascript中完成此功能是很容易的。这是我需要做的：

<input type="range" id="audio-slider" min="0" value="0" step="1" onchange="seek()">

如上所示，我只需要设置输入以检测“onchange”事件并触发“seek（）”函数。

这是将进度条同步到currentTime的javascript：

//set the currentTime to match users click on the progress bar
    function seek(){         
        audio.currentTime = audioSlider.value;          
        play(); 
    }