1

タグを使用し<audio>て、多数のブラウザでオーディオ ファイルを再生しています。

var audioTag = document.createElement("audio"),
    sourceTag = document.createElement("source"),
    sorryTag = document.createElement("div");
sorryTag.innerHTML = "This filetype not supported";
audioTag.onerror = function() {
    //some error handling code
}
sourceTag.onerror = function() {

    /some error handling code
}
sourceTag.src = "myfile.mp3";
audioTag.appendChild(sourceTag);
audioTag.appendChild(sorryTag);
//add audioTag to DOM

これはにつながります

<audio>
    <source src='myfile.mp3' />
    <div>This filetype not supported</div>
</audio>

Firefox は MP3 ファイルを再生できませんが、私はそれで問題ありません。Mozillaはまた、またはタグがメディアを再生できない場合にイベントがディスパッチされることを約束します。また、メディア タグ内にネストされたタグを 1 つずつ調べます (または、最後のタグはおそらくエラー メッセージです)。これらのどれも私にはうまくいかないようです。要素でエラー イベントが発生することも、エラー メッセージが表示されることもありません。私は何を間違っていますか？error<audio><video><source>

4

1 に答える 1

1

私が見つけた回避策は次のとおりです。

var audioTag = document.createElement("audio"),
    sourceTag = document.createElement("source");

//Add error event listeners for browsers other than FF
audioTag.onerror = function() {
    console.log("file can't be played. error from audio tag");
}
sourceTag.onerror = function() {
    console.log("file can't be played. error from source tag");
}
//The only way to tell that file failed to play on FF
//Timeout is because audioTag.networkState === audioTag.NETWORK_NO_SOURCE
//on IE till it starts downloading the file
setTimeout(function() {
    if(audioTag.networkState === audioTag.NETWORK_NO_SOURCE) {
        console.log("this hack is only for <audio> on FF.");
        console.log("Not for <video> and on no other browsers");
    }
}, 3000);
sourceTag.src = "<file_url>";
audioTag.appendChild(sourceTag);

基本的に、メディア タグとソース タグを作成し、エラー ハンドラを追加してから、ソース タグをメディア タグに追加します。エラー イベントが発生した場合は、ファイルが再生できないことがわかります。

networkStateFF では、エラー イベントは発生せず、要素のフラグに依存して、<audio>それを と比較する必要がありNETWORK_NO_SOURCEます。ブラウザが実際にファイルのダウンロードを開始するまで、IE では要素のsrc属性を設定した直後に検査することはできません。このため、フラグ値をチェックする前に約 3 秒のタイムアウトを設定してください (正確な科学ではありません)。これにより、ファイルを再生できるかどうかを判断するのに十分な時間を IE に与えることができます。<source>networkState === NETWORK_NO_SOURCE

アップデート

このためのテスト ケースを作成しました: http://jogjayr.github.com/FF-Audio-Test-Case/が、エラー イベントはそこで問題なく発生します。私が間違っていたと思います。私のアプリケーションでもエラーイベントが発生するため、FF14（当時使用していたもの）で壊れていました。ありがとう @BorisZbarsky

于 2012-10-02T21:34:29.853 に答える