9

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

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

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

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

任何想法？

谢谢！

4

4 回答 4

17

在不检查的情况下调用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 - 没有加载任何内容。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%。

于 2014-12-14T05:20:24.563 回答
1

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

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; 
}
于 2014-12-14T01:16:55.100 回答
1

我不太确定我是否理解你的问题。但这是我用来计算缓冲音频量的一种方法

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>

于 2017-07-04T15:50:26.563 回答
0

它返回的固定值是多少？你能创建一个简单的jsfiddle来演示这个问题吗？

这个html5 医生教程是最近写的，有一些关于 HTML5 音频当前播放状态的很好的信息。页面中间的以下提示看起来可能与您的情况相关：

您可能需要检查 durationchange 事件，因为某些持续时间可能会在媒体下载时发生变化。此外，根据元数据是否可用，您可能需要等到音频开始播放才能检查其持续时间。简而言之，请密切关注 durationchange 事件，并在持续时间未知时注意 NaN 值！

于 2012-10-23T10:03:40.593 回答