JSFiddle - React, Tailwind, and code Playground

by Rebecca Smith

HTML

<div>
     <h2>Example 1</h2>

    <audio id="sound1" src=http://geo-samples.beatport.com/lofi/5005876.LOFI.mp3 controls='controls' preload="none">
        <p>Your browser does not support the audio element.</p>
    </audio>
</div>
<div>
     <h2>Example 2</h2>

    <audio id="sound2" src=http://geo-samples.beatport.com/lofi/5005933.LOFI.mp3 controls='controls' preload="none">
        <p>Your browser does not support the audio element.</p>
    </audio>
</div>

JavaScript

var $ = function (id) {
    return document.getElementById(id);
}

var sound1_click = function () {
    //starts playing
    $("sound1").play();
    //pause playing
    $("sound2").pause();
}

var sound2_click = function () {
    //starts playing
    $("sound2").play();
    //pause playing
    $("sound1").pause();
}

window.onload = function () {
    $("sound1").onclick = sound1_click;
    $("sound2").onclick = sound2_click;
}