Wykrywanie błędu pliku HTML5 nie znaleziono pliku

Question

Próbuję uczynić przeglądarkę wyświetlić alert, jeśli atrybut src elementu audio wskazuje na nieistniejący plik, jednak nie otrzymuję żadnej odpowiedzi, jeśli dołączę "błąd" zdarzenie.

Oto skrzypce z moim problemem i co starałem 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> 

I 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!"); 
}); 

Jak mogę wykryć Błąd plik nie jest odtwarzany (z powodu nie znalezienia) z JS?

Answer 1

rzeczywiście muszą wiązać się z tagu źródłowego do słuchania Error gdy chętnych do wykrycia „nie znaleziono pliku błąd”. Spójrz na to fiddle.

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> 

Scenariusz:

$("#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!"); 
    }); 

To jest opisane w tej MDN article - sekcja obsługi błędów. Daj mi znać, czy to działa dla Ciebie.

Answer 2

się błędy dźwiękowe

$('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); 

Cytat z How to check if HTML5 audio has reached different errors

Answer 3

To powinno obsłużyć oba przypadki (np. Używając <audio> ze znacznikami <source> lub przy użyciu <audio src="">).
Zobacz example fiddle.

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