How to check if HTML5 audio has reached different errors

Question

Specifically, if one of the 206 requests for audio fails and buffering stops, is there a way to detect that state? Or should I have to check if buffering stopped by comparing the buffered amounts against past amounts?

Also how can I check if the specified source fails, could you then point it to another source?

Answer 1

1. Specifically, if one of the requests for audio fails and buffering stops, is there a way to detect that state?

Yes, there is few ways to do this! But if you want to catch the error type you can attach the error event listener to the sources:

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

2. Could you then point it to another source?

Inside the error handler function you can change the source using the src property of the audio element:

var audio = $(this); audio.src = "new-audio-file.mp3"; audio.load(); 

Another option is to add multiple source to the same audio tag using this syntax:

<audio>     <source id="audio_player_ogv" src="test.ogv" type="audio/ogg" />     //In case that you can't load the ogv file it will try to load test.mp3     <source id="audio_player_mp3" src="test.mp3" type="audio/mpeg" /> </audio> 

3. About manage multiple audio files

I would suggest to use a plugin if you are thinking to manage 206 audio files. I have been using SoundManager2 for a while and it's very good!

Answer 2

There is a complete list of the events handled by media elements in the spec: https://html.spec.whatwg.org/multipage/embedded-content.html#media-elements

I would look specifically at the stalled, abort, progress events.

Since this element is relatively new implementations may vary greatly. So I would test these events against the platforms you are targeting to see if they work as expected for your needs. If not you may need to do something a bit more manual like polling the buffered state as you had mentioned.