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