我正在尝试为 HTML5 音频元素制作一个加载栏（显示加载/缓冲的百分比）。
对于视频标签，可以使用以下方法进行计算：
video.buffered.end(0) / video.duration
但我无法让它与音频标签一起使用。它只是返回一个固定值。
任何想法？
Thanks!
Calling end方法上buffered未经检验是不可靠的。您可能试图在任何内容上调用该方法。检查这个小提琴：
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 - 没有加载任何内容。调用前需要确保缓冲长度不为0start or end method.
每次你读书的时候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>
NOTE：您所在的位置可能无法访问该 MP3 文件。如果是这种情况，请尝试其他对您有利的来源。否则你会听到一个非常好听的女声，并且看到百分比不断变化，最终达到100%。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
