JSFiddle - React, Tailwind, and code Playground

HTML

<div class="audio-container">
    <p>You can click this entire box, and it will take you too http://google.com</p>
    <audio controls>
        <source src="http://www.freetone.me/ring/Root/Music/Adventure_Time_Wedding_bells_8bit.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <p>However, I would very much like to prevent this box's default click behaviour if a click is performed on the audio element...</p>
</div>

CSS

.audio-container { display: block; width: 200px; background: #4679BD; color: white; text-decoration: none; padding: 10px; }
audio { width: 100%; }

JavaScript

$('audio').click(function(e) { e.stopPropagation(); });

$('div').click(function(e) {
    window.open("http://www.google.com/","_blank");
});