How to play multiple random songs in HTML

Question

So I'd like to have a button in the center of my page to initiate a playlist of randomly selected songs. Once the button is clicked, it should disappear and an audio control window spanning the entire width of the screen should pop up along the bottom of the screen. I've got five mp3 files I'm playing around with. I currently have a start, pause, and resume button, but they're freestanding ugly buttons. Here's a bit of code I have:

<audio id="blue">
    <source src="blue.mp3" type="audio/mpeg">
</audio>

<audio id="cigar">
    <source src="cigar.mp3" type="audio/mpeg">
</audio>

<audio id="immigrant">
    <source src="immigrant.mp3" type="audio/mpeg">
</audio>

<audio id="monkey">
    <source src="monkey.mp3" type="audio/mpeg">
</audio>

<audio id="money">
    <source src="money.mp3" type="audio/mpeg">
</audio>

<script>
    var a1 = document.getElementById("blue"); 
    var a2 = document.getElementById("cigar"); 
    var a3 = document.getElementById("immigrant"); 
    var a4 = document.getElementById("monkey"); 
    var a5 = document.getElementById("money"); 
    var x;

    function playAudio() { 
        var num = Math.floor(Math.random() * 5) + 1;
        if(num == 1){
            x = a1;
            x.play();
        }else if(num == 2){
            x = a2;
            x.play();
        }else if(num == 3){
            x = a3;
            x.play();
        }else if(num == 4){
            x = a4;
            x.play();
        }else if(num == 5){
            x = a5;
            x.play();
        }
} 

function pauseAudio() { 
    x.pause(); 
} 


function resumeAudio() {
    x.play();
}


</script>

I'm just completely lost as to how I can incorporate all this into something like this:

<audio controls>
    <source src="fileName.mp3" type="audio/mpeg">
</audio>

One of the major issues is that I don't know of a way to queue up a song (randomly) and have it play once the previous song ends. I did some Googling but I either couldn't understand what I saw, or it wasn't quite what I need.

Robert Moore Robert Moore · Accepted Answer · 2018-04-04T01:08:59

How about something like this:

HTML:

<audio id="player" controls></audio>

JavaScript:

const audioSources = ["blue.mp3", "cigar.mp3", "immigrant.mp3", "monkey.mp3", "money.mp3"];
const player = document.getElementById("player");
function playAudio() {
    let audioSource = audioSources[Math.floor(Math.random() * audioSources.length)];
    player.src = audioSource;
};
player.addEventListener('ended', playAudio);
playAudio(); // start audio playing immediately

Tell me if that works.

How to play multiple random songs in HTML

1 Answers