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').data('audio', $('audio:first')).on('click', function() {
    var self = this;
    $(this).data('audio').on('ended', function() {
        var n = $('audio').eq( $(self).data('audio').index('audio') + 1 );
        $(self).data('audio', n.length ? n : $('audio:first'));
    }).get(0).play();
});