HTML5-Audioelement-Datei nicht gefunden Fehler gefunden

Question

Ich versuche, einen Browser eine Warnung anzuzeigen, wenn ein Audioelement src Attribut auf eine nicht vorhandene Datei zeigt, aber ich bekomme keine Antwort, wenn ich den "Fehler" anhängen Veranstaltung.

Hier ist eine Geige mit meinem Problem und mit dem, was ich http://jsfiddle.net/Xx2PW/7/ versucht haben

Die 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> 

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

Wie kann ich einen Fehler des Erfassungs Datei wird nicht abgespielt (weil nicht gefunden) mit JS?

Answer 1

Sie müssen tatsächlich an den Quell-Tag binden, für das Hören Ereignis Fehler, wenn bereit zu erkennen „Dateifehler nicht gefunden“. Werfen Sie einen Blick auf diese 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!"); 
    }); 

Es ist in diesem MDN article beschrieben wird - Abschnitt Fehlerbehandlung. Lassen Sie mich wissen, ob es für Sie funktioniert.

Answer 2

Erste Audiofehler

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

Zitat von How to check if HTML5 audio has reached different errors

Answer 3

Dies sollte beide Fälle behandeln (z. B. <audio> mit <source> Tags oder <audio src="">).
Siehe 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); 
    }); 
});