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。而是使用触摸端。这基本上相当于 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 个事件，input 和 change。如果您没有使用 type=range，那么使用鼠标或触摸事件可能会有用，但您使用了。

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

使用合理的 min max 和 step，这样你就不必做太多的数学运算。

<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()"功能即可。

这里是javascript同步进度条到当前时间：

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

jQuery 单击滑块时音频持续时间发生变化

jQuery Audio Time Duration Change on Slider Click

javascript

jquery

audio

time

duration