web-dev-qa-db-ja.com

HTML5オーディオ要素ファイルが見つかりませんエラーを検出しています

オーディオ要素のsrc属性が存在しないファイルを指している場合にブラウザにアラートを表示させようとしていますが、「エラー」イベントを添付しても応答がありません。

これが私の問題と私が試したことのフィドルです http://jsfiddle.net/Xx2PW/7/

HTML：

<p>Non existent audio files - should return an error
    <audio preload="auto">
        <source src="http://example.com/non-existant.wav" />
        <source src="http://example.com/non-existant.mp3" />
        <source src="http://example.com/non-existant.ogg" />
    </audio>
</p>
<p>Existing audio file - should just play
    <audio preload="auto">
        <source src="http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a" />
    </audio>
</p>

そしてJS：

playerMarkup = "<a class=\"player\">Play</a>";
audioTags = $("audio");

audioTags.before(playerMarkup); //insert markup before each audio tag

$(".player").on("click", function () {
    currentAudio = $(this).next()[0];
    //I've tried catching the error like this - no effect
    alert("Trying to play file.");
    try {
        currentAudio.play();
    } catch (e) {
        alert("Error playing file!");
    }
});

//I've also tried just handling the event error - no effect
audioTags.on("error", function (e) {
    alert("Error playing file!");
    console.log("Error playing file!");
});

JSでファイルが再生されていない（見つからないため）エラーを検出するにはどうすればよいですか？

javascripthtmlaudiohtml5-audio
11
WojtekD

「ファイルが見つかりませんエラー」を検出する場合は、エラーイベントをリッスンするために実際にソースタグにバインドする必要があります。これを見てください フィドル 。

HTML：

<p id="player1">Non existent audio files - click to play</p>

<audio preload="none" controls>
    <source id="wav" src="http://example.com/non-existant.wav" />
    <source id="mp3" src="http://example.com/non-existant.mp3" />
    <source id="ogg" src="http://example.com/non-existant.ogg" />
</audio>

脚本：

$("#player1").on("click", function () {
    //I've tried catching the error like this - no effect
    alert("Trying to play file.");
    try {
        $('audio')[0].play();
    } catch (e) {
        alert("Error playing file!");
    }
});

$("audio").on("error", function (e) {
        alert("Error at audio tag level!");
    });

// try this then
$("#wav").on("error", function (e) {
        alert("Error with wav file!");
    });
$("#mp3").on("error", function (e) {
        alert("Error with mp3 file!");
    });
$("#ogg").on("error", function (e) {
        alert("Error with ogg file!");
    });

これについては、この MDN記事 -セクションのエラー処理で説明されています。それがあなたのために働くかどうか私に知らせてください。

13
Arnaud Leyder

これは両方の場合を処理する必要があります（たとえば、<audio>を<source>タグとともに使用するか、<audio src="">を使用します）。
フィドルの例 を参照してください。

function handleSourceError(e) { alert('Error loading: '+e.target.src) }
function handleMediaError(e) {
    switch (e.target.error.code) {
        case e.target.error.MEDIA_ERR_ABORTED:
            alert('You aborted the media playback.'); break;
        case e.target.error.MEDIA_ERR_NETWORK:
            alert('A network error caused the media download to fail.'); break;
        case e.target.error.MEDIA_ERR_DECODE:
            alert('The media playback was aborted due to a corruption problem or because the media used features your browser did not support.'); break;
        case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
            alert('The media could not be loaded, either because the server or network failed or because the format is not supported.'); break;
        default:
            alert('An unknown media error occurred.');
    }
}

var toArray = Array.prototype.slice;
toArray.apply(document.getElementsByTagName('audio')).forEach(function(audio){
    audio.addEventListener('error', handleMediaError);
    toArray.apply(audio.getElementsByTagName('source')).forEach(function(source){
        source.addEventListener('error', handleSourceError);
    });
});
6
idbehold

オーディオエラーが発生する

$('audio').addEventListener('error', function failed(e) {
   // audio playback failed - show a message saying why
   // to get the source of the audio element use $(this).src
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('You aborted the video playback.');
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('A network error caused the audio download to fail.');
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('The audio playback was aborted due to a corruption problem or because the video used features your browser did not support.');
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('The video audio not be loaded, either because the server or network failed or because the format is not supported.');
       break;
     default:
       alert('An unknown error occurred.');
       break;
   }
 }, true);

引用元 HTML5オーディオがさまざまなエラーに達したかどうかを確認する方法

2
Vishnuraj V