javascript <audio>: 无法更新当前时间

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，这会更好用。

Answer 2

这看起来像是范围问题。在 $(currenttrack).bind('canplay', function() { 中，currenttrack 未定义，因为它是在函数中声明的。

此外，您使用内联 onchange 调用一个函数...并且该函数注册一个更改处理程序，jQuery 方式。非此即彼。

试试这个：

var currenttrack = $('.track')[0];
var val = 0;

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

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


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

并从您的标记中删除 onchange="PBtap()"。

另外...不要使用已弃用的 .bind()。请改用 .on()。

javascript <audio>: 无法更新当前时间

javascript <audio>: cant update currentTime

html

javascript

audio

jquery

html5-audio