JSFiddle - React, Tailwind, and code Playground
HTML
<audio id="player" controls>
<source id="mp3" src="http://www.nielsharbo.dk/test/audioplayer/innocence.mp3">
<source id="ogg" src="http://www.nielsharbo.dk/test/audioplayer/innocence.ogg">
</audio>
<div>
<button type="button" id="load">Load</button>
<button type="button" id="play">Play</button>
<button type="button" id="pause">Pause</button>
</div>
JavaScript
$(document).ready(function(){
var myAudio = document.getElementById("player");
$("#load").click(function(){
$("#mp3").attr('src','http://www.nielsharbo.dk/test/audioplayer/stepahead.mp3');
$("#ogg").attr('src','http://www.nielsharbo.dk/test/audioplayer/stepahead.ogg');
myAudio.load();
});
$("#play").click(function(){
myAudio.play();
});
$("#pause").click(function(){
myAudio.pause();
});
});