JSFiddle - React, Tailwind, and code Playground

HTML

<p>Non existent audio files - should return an error
    <audio preload="auto">
        <source src="http://example.com/non-existant.wav" />
        <source src="http://example.com/non-existant.mp3" />
        <source src="http://example.com/non-existant.ogg" />
    </audio>
</p>
<p>Existing audio file - should just play
    <audio preload="auto">
        <source src="http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a" />
    </audio>
</p>

CSS

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

JavaScript

playerMarkup = "<a class=\"player\">Play</a>";
	audioTags = $("audio");

	audioTags.before(playerMarkup); //insert markup before each audio tag

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

    //I've also tried just handling the event error - not effect
	audioTags.on("error", function (e) {
	    alert("Error playing file!");
	    console.log("Error playing file!");
	});