javascript <音频> : cant update currentTime

Question

我正在尝试为我的 html5 音频播放器制作进度条，并制作通过点击来更改轨道播放时间的功能。我决定使用输入[范围]来完成此操作，但是当我点击栏时，当前播放时间不会更新，轨道只是从头开始播放:

我的html:

<audio controls='controls' class="track">
      <source src="{{ user_lib.audio_file.url }}" type="audio/mpeg">
      <source src="{{ user_lib.audio_file.url }}" type='audio/ogg; codecs=vorbis' />
      <p>Your user agent does not support the HTML5 Audio element.</p>
</audio>

<div class="progress-bar">
        <input type="range" min="0" max="100" value="0" step="1" class="track-pb"
        onchange="PBtap()" id="track-pb"/>
    </div>

我的js:

function PBtap() {
        $('#track-pb').on('input propertychange', function() {

        var currenttrack = $('.track')[0];
        var val = parseInt($(this).val() * currenttrack.duration / 100, 10)
        $('#track-pb').prop("value", val);
        currenttrack.currentTime = val;
    })
}

我尝试使用

$(currenttrack).bind('canplay', function() {
            this.currentTime = val;
          });

我做错了什么？

Answer 1

这应该有效:

function PBtap(trackpb) {
    var currenttrack = $('.track')[0];
    var val = parseInt($(trackpb).val() * currenttrack.duration / 100, 10)
    currenttrack.currentTime = val;
}

在 HTML 中，将 onchange="PBtap()" 更改为 onchange="PBtap(this)"。这样使用onchange时，默认是无法访问this的。

您还可以添加以下内容来更改音频播放时的范围值:

setInterval(function () {
  var track = $(".track")[0];
  $("#track-pb")[0].value = track.currentTime / track.duration * 100;
}, 100);

如果将 HTML 中的 onchange 更改为 oninput，效果会更好。