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 municate that to the user.

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

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 municate that to the user.

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

• javascript
• html5-audio

2 Answers 2

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>

Is it possible to check the response headers for the media URLs separately? If so, you could request just headers for the media URLs, check for anything other than 200, and then provide feedback to the user. Might be a workaround. Your code looks fine to me.