JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Audio Player</h1>
<!-- AUDIOS FILES -->
<audio id="id1" src="https://upload.wikimedia.org/wikipedia/commons/3/37/Zh-bèijing.ogg"></audio>
<audio id="id2" src="https://upload.wikimedia.org/wikipedia/commons/8/8a/Zh-Beijing.ogg"></audio>
<audio id="id3" src="https://upload.wikimedia.org/wikipedia/commons/7/73/Zh-Shanghai.ogg"></audio>

<!-- HTML -->
<div id="play" onClick="document.getElementById('id1').play()">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Media-playback-start.svg" /><br />
    <button>Play</button>
</div>

CSS

div { border: 1px solid #666; background: #EEE; width: 10%; }

JavaScript

function chain(ids) {
    function setHandler(first, next) {
      document.getElementById(first).addEventListener('ended', function(){
        document.getElementById(next).play();
      });   
    }
    for (var i = 0; i < arguments.length - 1; i ++) {
        setHandler(arguments[i], arguments[i+1]);
    }
}
chain('id1', 'id2', 'id3')