javascript - onTimeUpdate 链接到进度条

Question

所以我已经为此工作了几天，试图从另一个 JsFiddle 中获取基础知识并将其合并到我自己的中。我正在尝试制作一个音乐播放器，但在使用 ontimeUpdate 时遇到问题JavaScript 中的函数。这是我目前正在使用的功能:

audio.on("timeupdate", function() {
   $("#bar").attr("value", this.currentTime / this.duration);
});

哪里audio是代表 <audio> 的变量元素，和 #bar是 <progress> 的 id元素。这是我的 fiddle :https://jsfiddle.net/4t2tf0af/5/

这是我正在使用的 fiddle :http://jsfiddle.net/DCE6N/547/

现在，在后一个 fiddle 中，当音乐播放时，进度条更新为 0 到 1 之间的十进制值。我试图做同样的事情，但没有成功。

Answer 1

我注意到了一些问题，但为了回答你的第一个问题，“audio”是一个 dom 元素，因此它没有任何称为“on”的东西。所以你需要将它包装在 jquery 标签中才能工作:

  $(audio).on("timeupdate", function()
  {
    $("#bar").attr("value", (this.currentTime / this.duration) * 100);
  });

您会注意到，我还将该值乘以 100，因为虽然原始 fiddle 的最大值为“1”，但您的 fiddle 的最大值为“100”。

fiddle 末尾有一些字符也阻止了它的工作。

最后，您需要为您访问的歌曲设置协议(protocol) https:

audio.setAttribute("src", "https://mp3red.co/stream/27942256/wintersleep-amerika.mp3"

这是一个经过我调整的更新的 fiddle ，您可以尝试一下:

https://jsfiddle.net/4t2tf0af/8/