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) {
    var $a = $(this).closest('a');
    $a.data('href', $a.attr('href')).removeAttr('href');
}).on('mouseleave', function () {
    var $a = $(this).closest('a');
    $a.attr('href', $a.data('href'));
});