javascript - 如何为 HTML5 音频元素制作加载栏？

Question

我正在尝试为 HTML5 音频元素制作一个加载栏(显示加载/缓冲的百分比)。

对于视频标签，可以使用以下方法计算:

video.buffered.end(0) / video.duration

但我无法让它与音频标签一起使用。它只返回一个固定值。

有什么想法吗？

谢谢!

Answer 1

在buffered 上调用end 方法而不检查是不可靠的。您可能试图在什么都不调用该方法。检查这个 fiddle :

document.querySelector('span').innerHTML = document.querySelector('audio').buffered.length;

<audio src="http://myst729.qiniudn.com/within-temptation_pale.mp3" controls autoplay></audio>
<p>Buffered Length: <span></span></p>

看到了吗？一开始，缓冲长度为 0 - 没有加载任何内容。在调用 start 或 end 方法之前，您需要确保缓冲长度不为 0。

---

每次你阅读buffered，它确实是固定的。所以，要达到视觉上的“加载”效果，你需要一遍又一遍地阅读。

这里我尝试每 50 毫秒更新一次加载和播放百分比:

var audio = document.querySelector('audio');
var percentages = document.querySelectorAll('span');

function loop() {
  var buffered = audio.buffered;
  var loaded;
  var played;

  if (buffered.length) {
    loaded = 100 * buffered.end(0) / audio.duration;
    played = 100 * audio.currentTime / audio.duration;
    percentages[0].innerHTML = loaded.toFixed(2);
    percentages[1].innerHTML = played.toFixed(2);
  }

  setTimeout(loop, 50);
}

loop();

<audio src="http://myst729.qiniudn.com/within-temptation_pale.mp3" controls autoplay></audio>
<p>Loaded: <span></span>%</p>
<p>Played: <span></span>%</p>

注意:您所在的位置可能无法访问 MP3 文件。如果是这种情况，只需尝试对您有利的其他来源。否则你会听到一个很好听的女声，并且看到百分比不断变化，最终达到 100%。