No error event when media sources fail to load

Question

I have an audio element with several sources, all provided by a streaming service. We ran in to a user cap, so the streams were failing with 403 http errors.

After each source failed and a separate error appeared in console ("Max listeners reached"), a final error was output in console,

"All candidate resources failed to load. Media load paused."

However, no error event was fired on the element. I tried script attachment:

$(document).ready(function () {
    $('#audioPlayerElement').on('error', function () {
        // does not get triggered
    });

    $('#audioPlayerElement').error(function () {
        // does not get triggered
    });
});
$(document).on('error', '#audioPlayerElement', function () {
    // does not get triggered
});
document.getElementById('audioPlayerElement').onerror = function () {
    // does not get triggered
};

... I tried inline javascript:

<script>
    var playerError = function () {
        // does not get triggered
    }
</script>
<audio onerror="playerError()"...

... nothing.

This is my HTML (with the URLs redacted):

<audio id="audioPlayerElement" controls preload="auto" >
    <source src="http://[STREAM_URL].ogg" type="audio/ogg">
    <source src="http://[STREAM_URL].mp3" type="audio/mp3">
    <source src="http://[STREAM_URL].wav" type="audio/wav">
</audio>

Am I missing something? I read through the media events documentation on MDN and did not see any different event specific to this situation, error seems to be the appropriate thing to use. My goal is to detect the fact that the media isn't going to load and communicate that to the user.

Tested in Firefox, Safari, and Chrome with same results.

Answer 1

I was curious so I played around with this and found that if you attach the onerror to the individual sources your event handler function will be triggered.

<audio id="audioPlayerElement" controls preload="auto">
  <source src="whatever" type="audio/ogg" onerror="playerError()">
  <source src="whatever" type="audio/mp3" onerror="playerError()">
  ...
</audio>