JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="playlist">
    <li>
        <button class="control play">Tocar todas &#9654;</button>
    </li>
    <li>audio 1
        <audio class="track" preload="none" controls="" type="audio/mpeg">
            <source type="audio/mp3" src="http://www.archive.org/download/bolero_69/Bolero.mp3" />
        </audio>
    </li>
    <li>audio 2
        <audio class="track" preload="none" controls="" type="audio/mpeg">
            <source type="audio/mp3" src="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3" />
        </audio>
        <li>audio 3
            <audio class="track" preload="none" controls="" type="audio/mpeg">
                <source type="audio/mp3" src="http://www.archive.org/download/CanonInD_261/CanoninD.mp3" />
            </audio>
        </li>
</ol>

CSS

.playlist li {
    padding: 5px;
    border;
    1px solid #ccf;
}
li {
    list-style-type: none;
}

JavaScript

var atual = 0,
    next = 0;

function tocador(playlist, tracks) {
    $('.playlist .track').trigger('pause');
    $('.playlist .play').removeClass('active');
    tocando = true;
    $(playlist).addClass('active');
    tracks.on('ended', function () {
        next = atual == tracks.length ? 0 : atual + 1;
        tracks.eq(next).trigger('load').trigger('play');
    });
    tracks.eq(atual).trigger('load').trigger('play');
}
$('.playlist').on('click', '.play', function (e) {
    atual = 0;
    var tracks = $(this).closest('ol').find('.track');
    tocador(this, tracks);
});

$('.playlist audio').on('play', function () {
    var index = $(this).closest('li').index() - 1;
    if (atual == index || next == index) return;
    atual = next = index;
    var tracks = $(this).closest('ol').find('.track');
    var playlist = $(this).closest('playlist').find('.play');
    tocador(playlist, tracks);
});