播放时无法让范围滑块与音频一起移动

Posted 2023-04-18

【中文标题】播放时无法让范围滑块与音频一起移动

【英文标题】：Can't get range slider to move along with audio while it's playing

【发布时间】：2017-02-25 01:57:09

【问题描述】：

我有一个用 JQuery 构建的 mp3 播放器。我遵循了一个很棒的教程，但播放器没有擦洗，只是一个你无法改变的进度条。在研究中，我发现了一些可以正常工作的擦洗代码：

$("#seek").bind("change", function() 
    audio.currentTime = $(this).val();
    $("#seek").attr("max", audio.duration);     
);

没关系。但滑块在播放时不会随音频一起移动。我从不同的地方尝试了很多不同的代码，但似乎没有任何效果。我最近的尝试是这样的（这是最后一行不起作用）：

function showDuration()
    $(audio).bind('timeupdate', function()
        //Get hours and minutes
        var s = parseInt(audio.currentTime % 60);
        var m = parseInt((audio.currentTime / 60) % 60);
        //Add 0 if seconds less than 10
        if (s < 10) 
            s = '0' + s;
        
        $('#duration').html(m + '.' + s);   
        var valueSlider = 0;
        if (audio.currentTime > 0) 
            valueSlider = Math.floor((100 / audio.duration) *     
            audio.currentTime);
        
        $('#seek').html('value',valueSlider);
    );

除最后一行外，所有这些仅用于持续时间显示。我添加以尝试更改滑块的值以匹配音频持续时间。我也试过：

$('#seek').attr('value',valueSlider);

我的滑块 HTML 如下所示：

 <div id="tracker">
        <input id="seek" type="range" min="0" max="100" value="0"/>
        <span id="duration"></span>
     </div>

我想也许我为 min、max、value 输入的值阻止了 JQuery 动态更改它，但是当我什么都不放时它仍然不起作用。

【参考方案1】：

你必须使用jQuery的val()作为setter来改变值，所以改变这个

$('#seek').html('value',valueSlider);

到

$('#seek').val(valueSlider);

【讨论】：

成功了！非常感谢。

滑动时滑块不停留