JSFiddle - React, Tailwind, and code Playground

HTML

<audio id="batmansong1" src="Songs/nanananabatman.m4a"></audio>
<button id="play">
    <img src="Buttons/play.jpg" />
</button>
<button id="pause">
    <img src="Buttons/pause.jpg" />
</button>

CSS

img {
    width:40px;
    height:40px;
}

JavaScript

player = document.getElementById('batmansong1');
player.addEventListener('ended', function () {
    if (player.src == 'link/to/your/next/file.m4a') return; //check if we have already set the new src, as this function is called EVERY TIME your audio file ends.
    player.src = 'link/to/your/next/file.m4a';
    player.play();
});

document.getElementById('pause').addEventListener('click', function () {
    document.getElementById('batmansong1').pause();
});
document.getElementById('play').addEventListener('click', function () {
    document.getElementById('batmansong1').play();
});