javascript <audio>：无法更新 currentTime答案

【问题标题】：javascript <audio>: cant update currentTimejavascript <audio>：无法更新 currentTime
【发布时间】：2018-10-20 15:55:56
【问题描述】：

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

我的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;
          });

我做错了什么？

【问题讨论】：

您能发布完整的 HTML，包括实际的音频元素吗？（理想情况下在 codepen 或 jsfiddle 中）。您可能不希望 $('#track-pb').on('input propertychange', function() { 包含在 PBtap() 中，但我不确定这是否能解决您的问题。
我添加了音频元素。其他代码与音频标签无关。我不能真正将它上传到 jsfiddle 或 codepen，因为我有一些 django 变量，不确定它会在那里工作

标签： javascript jquery html audio html5-audio

【解决方案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，效果会更好。

【讨论】：

不幸的是同样的事情。我已经得到了 setInterval 函数，但我停止了它，因为我认为 Tap 函数与它冲突。但看起来问题出在其他事情上
@AndrejVilenskij 看看我的代码笔：codepen.io/z-smith/pen/WayyoO（我使用了一些随机音频进行演示）。它对我来说似乎工作正常（在 Chrome 和 Firefox 中测试）。如果它仍然对您不起作用，您是否在控制台中收到任何错误？请注意（如果您还没有尝试过），使用 oninput 而不是 onchange 对我来说有很大的不同。
现在我只是复制粘贴了你的代码，但它是一样的。从一开始就跟踪，更改后的 currentTime 值总是 = 0（使用控制台日志检查）。我改为oninput，但它仍然是一样的。我还尝试禁用所有其他 js 代码，但即使这样也无济于事。

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

【讨论】：

好吧，仍然没有工作。现在轨道刚刚停止，当我点击进度条时，我无法再次运行它，直到页面刷新