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

Question

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

对于视频标签，可以使用以下公式进行计算：

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

但是我不能让这个和音频标签一起工作。它只返回一个固定值。

有什么想法吗？

谢谢!

Answer 1

在未进行检查的情况下对buffered调用end方法是不可靠的。您可能正在尝试对任何对象调用该方法。检查这个小提琴：

​

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%。

Answer 2

您可以使用以下代码来获取HTML5音频元素的进度并将其应用于元素：

var myAudio = document.getElementById('#myAudio');
var myProgressBar = document.getElementById('#myProgressBar'); 

myAudio.addEventListener('timeupdate', onLoadProgress);

function onLoadProgress () {
    var progress = parseInt(((myAudio.currentTime / myAudio.duration) * 100), 10);
    myProgressBar.value = progress; 
}

Answer 3

我不太确定我是否理解了你的问题。但这是我用来计算有多少音频被缓冲的方法

​

var audio = document.querySelector('audio');
var set;
window.onload = function(){set=setInterval(buffer,1000);}; 
    function buffer () {
    if(audio.buffered.length>0){
   var percent = (audio.buffered.end(0) / audio.duration) * 100;
       document.querySelector('p').innerHTML = percent+'%';
     if(percent === 100){
           clearInterval(set); 
       } 
       }
}

<audio src="http://customhtml5video.000webhostapp.com/audio.mp3" controls></audio>
<p></p>

​