JSFiddle - React, Tailwind, and code Playground

HTML

<audio id="audio" preload="none" controls>
    <source id="wav" src="http://example.com/non-existant.wav" />
    <source id="mp3" src="http://example.com/non-existant.mp3" />
    <source id="ogg" src="http://example.com/non-existant.ogg" />
</audio>

<p id="wavP"></p>
<p id="mp3P"></p>
<p id="oggP"></p>

JavaScript

var audio = document.getElementById('audio');

audio.addEventListener('error', function(e) {
   alert('never fired'); 
});
    
document.getElementById('wav').addEventListener('error', function(e) {
    document.getElementById('wavP').textContent = 'Wav error: audio.error = ' + audio.error;
    console.error('Wav file error: ',e); 
});
document.getElementById('mp3').addEventListener('error', function(e) {
    document.getElementById('mp3P').textContent = 'MP3 error: audio.error = ' + audio.error;
    console.error('MP3 file error: ',e);
    
});
document.getElementById('ogg').addEventListener('error', function(e) {
    document.getElementById('oggP').textContent = 'OGG error: audio.error = ' + audio.error;
    console.error('OGG file error: ',e); 
});