javascript 中的内部 html 不工作

Question

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

javascript 显示缓冲的音频 百分比 ，如果没有发生缓冲，则显示 loading...

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...

当我们放置小音频文件时它会显示。那么为什么不用于大文件呢？

更新：

(updated codes)

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);
}

javascript 中的内部 html 不工作

inner html in javascript not working

javascript

html5-audio