JSFiddle - React, Tailwind, and code Playground

HTML

<p id="player1">Non existent audio files - click to play</p>
    
<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>

CSS

.player {
    border: 1px solid red;
    color: red;
    cursor: pointer;
}

JavaScript

$("#player1").on("click", function () {
	    //I've tried catching the error like this - no effect
        alert("Trying to play file.");
        try {
	        $('audio')[0].play();
	    } catch (e) {
	        alert("Error playing file!");
	    }
	});

    // try this then

    $("#wav").on("error", function (e) {
            alert("Error with wav file!");
        });
    $("#mp3").on("error", function (e) {
            alert("Error with mp3 file!");
        });
    $("#ogg").on("error", function (e) {
            alert("Error with ogg file!");
        });