MP3のHTML5継続時間が動作することがある

Question

HTML5オーディオプレーヤーでMP3ファイルの継続時間を表示する際に問題が発生しています。場合によっては継続時間をロードすることもありますが、時にはそれを実行しないこともあります。

時間がかかるのは、CSSを変更したり、ページを更新したりするときです。

MP3ファイルを変更して別のMP3ファイルを読み込むと、再生時間が表示されます。私はページをリフレッシュすると消えてしまいます。

これは、継続時間のためのコードです：

audio.addEventListener('loadedmetadata', function(){ 
    progress.setAttribute('max', Math.floor(audio.duration)); 
    duration.textContent = toHHMMSS(audio.duration); 
}); 

は、私には、JavaScriptに新たなんだので、私はコーディングするか見当がつかない。私はhttps://codepen.io/davatron5000/pen/uqktGからこのコードを使用しています。ページを更新すると、mp3ファイルの再生時間が消えます。

Answer 1

これはおそらくキャッシュのためです。

オーディオのsrcをマークアップ（html）に設定している場合、イベントリスナーをアタッチすると、メディアのキャッシュされたバージョンが既にロードされている可能性があります。

window.onload = function(){ // kinda force the situation 
 

 
    aud.onloadedmetadata = function(e){ // this won't fire 
 
    console.log('metatadata loaded'); 
 
    }; 
 
    };

<audio src="https://dl.dropboxusercontent.com/s/agepbh2agnduknz/camera.mp3" id="aud"/>

をしかし、この場合には、あなたはすでにそのdurationにアクセスすることができます。

したがって、あなたのイベントハンドラは、これまで発生しません。

window.onload = function() { 
 
    if (aud.duration) { 
 
    doSomething(); 
 
    } else { 
 
    aud.onloadedmetadata = doSomething; 
 
    } 
 
} 
 

 
function doSomething(event) { 
 
    console.log(aud.duration); 
 
    console.log('from event handler :', !!event); 
 
}

<audio src="https://dl.dropboxusercontent.com/s/agepbh2agnduknz/camera.mp3" id="aud" />

それとも、jsの中でもう一度メディアsrcを設定することができます。
だからあなただけのその期間をチェックしなければなりません。

window.onload = function() { 
 
    aud.onloadedmetadata = function doSomething(event) { 
 
    console.log(aud.duration); 
 
    } 
 

 
    aud.src = aud.src; // forces the event to fire again 
 
}

<audio src="https://dl.dropboxusercontent.com/s/agepbh2agnduknz/camera.mp3" id="aud" />

* UAは、このための異なる振る舞いを持っているすべてのインラインスクリプトが解析されるまで、例えばFFは、すべての負荷イベントを保存します。 SafariとChromeはできるだけ早く起動します。