Question

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

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

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

但我无法使用音频标签。它只返回一个修复值。

有什么想法吗？

谢谢！

Answer 1

在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％。

Answer 2

您可以使用以下代码获取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; 
}

Answer 3

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

这篇html5 doctor tutorial最近写了，并且有关于HTML5音频当前播放状态的一些很好的信息。在页面的下半部分，以下提示看起来可能与您的情况相关：

您可能需要检查durationchange事件，因为有些持续时间可以媒体下载时更改。此外，取决于元数据是否可用，你可能需要等到音频开始播放检查其持续时间。简而言之，密切注意持续时间变化事件，当持续时间尚不清楚时，注意NaN值！

Answer 4

我不太确定我是否做了你的概率。但这是我用来计算缓冲音量的方式

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>

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

4 个答案: