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" >
    <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

$('#play').on('click', function() {
    $('audio').on('ended', function() {
        $('audio').eq($(this).index('audio')+1).get(0).play();
    }).get(0).play();
});