Question

我正在尝试为我的html5音频播放器制作进度条，并通过点击来使功能更改曲目播放时间。我决定用input [range]来做，但是当我点击栏上的当前播放时间不更新时，曲目只是从头开始播放：

我的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>：无法更新currentTime

2 个答案: