javascript - javascript 中的内部 html 不工作

Question

我有一个音频文件和一个 JavaScript。

JavaScript 显示缓冲音频的百分比，如果没有缓冲，则显示正在加载...

function loop2() {
  var audio2 = document.getElementById("atwo1");
  var percentages = document.getElementsByClassName("atwo1l")
  var buffered = audio2.buffered;
  var loaded;

  if (buffered.length) {
    loaded = 100 * buffered.end(0) / audio2.duration;
    if (loaded.toFixed(2) != '0') {
      percentages[0].innerHTML = 'Loading: ' + loaded.toFixed(2) + '%';
    } else {
      percentages[0].innerHTML = 'Loading....';
    }
  }

  setTimeout(loop2, 50);
}

loop2();

<audio id="atwo1" controls="controls">
  <source src="https://docs.google.com/uc?export=download&id=19gLpR7J8TVHmooVbM23eK5Xq0f9YXNZf">
</audio>
<p><span class="atwo1l"></span></p>

但是对于上面的代码，并没有显示loading...

当我们放置小音频文件时，它将显示。那么为什么不适合大文件呢？

更新:

Found a partial answer ( updated codes )

<强> Why a partial answer?

Answer 1

所有评论都集中在一个答案中

function loop2() {
  var audio2 = document.getElementById("aone1"),
      percentages = document.getElementsByClassName("aone1l"),
      buffered,
      loaded;

  if (audio2 && percentages) { // if both elements are found in the DOM
    buffered = audio2.buffered;

    if (buffered.length) {
      loaded = 100 * buffered.end(0) / audio2.duration;

      if (loaded.toFixed(2) != '0') {
        percentages[0].innerHTML = 'Loading: ' + loaded.toFixed(2) + '%';
      }

      if(loaded >= 1){
         audio2.classList.remove('un-buffered');
      }
    } else { // handle the case where the buffered.length is 0 or undefined
      percentages[0].innerHTML = 'Loading....';
    }
  }

  setTimeout(loop2, 50);
}