JSFiddle - React, Tailwind, and code Playground

HTML

<p>Non existent audio files - click to play</p>
    
<audio preload="none" controls>
    <source src="non-existant.wav"/>
    <source src="non-existant.mp3"/>
    <source src="non-existant.ogg"/>
</audio>

<audio preload="none" src="non-existant.mp3" controls>

JavaScript

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);
    });
});