Rilevamento errore file audio HTML5 non trovato errore

Question

Sto tentando di far visualizzare al browser un avviso se un attributo src di un elemento audio punta a un file inesistente, tuttavia non ottengo alcuna risposta se allego l'errore " evento.

Ecco un violino con il mio problema e con quello che ho provato http://jsfiddle.net/Xx2PW/7/

Il codice 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> 

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

Come posso rilevare un errore del file non viene riprodotto (a causa di non essere trovato) con JS?

Answer 1

In realtà è necessario associare al tag fonte per l'ascolto di errore di evento quando disposto a rilevare "File non trovato errore". Date un'occhiata a questo 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> 

Script:

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

E 'descritto in questo MDN article - la gestione degli errori sezione. Fammi sapere se funziona per te.

Answer 2

Come errori audio

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

Citato da How to check if HTML5 audio has reached different errors

Answer 3

Questo dovrebbe gestire entrambi i casi (ad esempio utilizzando <audio> con i tag <source> o utilizzando <audio src="">).
Vedere 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); 
    }); 
});