Trying to use .onerror error event will trigger only about a 80% rate for me. On my demo page, doesn't matter if it's a refresh, force refresh or URL entry, try a few times and it will not detect the failed load.

Here is the Codepen of all code, with errant ID from google drive. If you replace a valid one like: 1Cguauee-7MKN2nrXM_ZvdYRLEBglCvFG it will play.

Excerpt with just specific parts:

HTML

<audio id="audioFile" src="URI"></audio>

Script

const audio = document.getElementById('audioFile');
audio.onerror = (event) => {
    console.log("Error " + audio.error.code + ": " + audio.error.message);
};

Is this .onerror the best route to go to make sure the media player doesn't hang waiting for a missing/rejected file? With google drive being the source, I do see some 403 errors randomly popping up, that when refreshed a few times later dissipate. I need to convey to reload when this occurs.

The browser always shows the error in dev console. Instead do I do a fetch()?