显示音频的缓冲百分比

Question

为什么我无法使用 Javascript 显示音频的缓冲百分比？

\n\n

\r\n

\r\n

var audio = document.getElementById("aone1");\r\nvar percentages = document.getElementById("aone1l");\r\n\r\nfunction loop() {\r\n  var buffered = audio.buffered;\r\n  var loaded;\r\n  var played;\r\n\r\n  if (buffered.length) {\r\n    loaded = 100 * buffered.end(0) / audio.duration;\r\n    played = 100 * audio.currentTime / audio.duration;\r\n    percentages[0].innerHTML = loaded.toFixed(2);\r\n    percentages[1].innerHTML = played.toFixed(2);\r\n  }\r\n\r\n  setTimeout(loop, 50);\r\n}\r\n\r\nloop();

\r\n

<audio id="aone1" controls="controls">\r\n   <source src="http://jainvidhya.epizy.com/Audio/Part1/\xe0\xa4\x91\xe0\xa4\xa1\xe0\xa4\xbf\xe0\xa4\xaf\xe0\xa5\x8b \xe0\xa4\xa8\xe0\xa4\x82\xe0\xa4\xac\xe0\xa4\xb0 1 \xe0\xa4\xa8\xe0\xa4\xae\xe0\xa4\xb8\xe0\xa5\x8d\xe0\xa4\x95\xe0\xa4\xbe\xe0\xa4\xb0 \xe0\xa4\xae\xe0\xa4\xb9\xe0\xa4\xbe\xe0\xa4\xae\xe0\xa4\x82\xe0\xa4\xa4\xe0\xa5\x8d\xe0\xa4\xb0.mp4">\r\n</audio>\r\n<p>Loaded: <span id="aone1l"></span>%</p>\r\n<p>Played: <span id="aone1l"></span>%</p>

\r\n

\r\n

\r\n

\n\n

另外为什么音频需要很长时间才能加载？

\n

Answer 1

在这里使用 uniqueid或使用类，这将为您提供一个数组，然后设置innerHTML：

var audio = document.getElementById("aone1");
var percentages = document.getElementsByClassName("aone1l")

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 id="aone1" controls="controls">
   <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3">
</audio>
<p>Loaded: <span class="aone1l"></span>%</p>
<p>Played: <span class="aone1l"></span>%</p>