JSFiddle - React, Tailwind, and code Playground

HTML

<a href="http://google.com" target="_blank" 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>
</a>

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