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

【问题标题】：jQuery Audio Time Duration Change on Slider Click滑块单击时的jQuery音频持续时间更改
【发布时间】：2019-03-12 01:03:15
【问题描述】：

我注意到以下代码在台式机和笔记本电脑上运行良好，但不能在我的 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 中单击滑块时更改持续时间的问题，我将不胜感激。

【问题讨论】：

标签： javascript jquery audio time duration

【解决方案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>

【讨论】：

最好收听单个input事件。
我尝试了以下方法，但在 Android 移动设备上仍未检测到： //jQuery 检测用户何时使用 seekslider $("#seekslider").on(' touchend mouseup', function(e){ var leftOffset = e.pageX - $(this).offset().left; var songPercents = leftOffset / $('#seekslider').width(); audio.currentTime = songPercents * audio.duration; });

【解决方案2】：

一个 type=range 滑块有 2 个事件，输入和更改。如果您不使用 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">

【讨论】：

嗨，Jake，我也在 jQuery 论坛上看到了你。感谢你的付出。不幸的是，它仍然没有成功。这是我尝试过的：
//jQuery 检测用户何时使用 seekslider 更改时间线 $("#seekslider").on("input", function(e){ var leftOffset = e.pageX - $(this ).offset().left; var songPercents = leftOffset / $('#seekslider').width(); audio.currentTime = songPercents * audio.duration; });

【解决方案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(); 
    }

【讨论】：