JSFiddle - React, Tailwind, and code Playground

by Graham Walters

HTML

<button id="start">Start</button>
<div id="sounds"></div>

CSS

body {
    background-color: #999;
}

JavaScript

// Random Number Gen
function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Don't understand the random numbers chosen, but using the original ones!
var delays = new Array();
for (var i=0; i<150; i++)
  delays.push(Math.random(0, 600) * 10000);

var sounds = new Array("tone0.ogg", "tone2.ogg", "tone4.ogg", "tone6.ogg", "tone7.ogg", "tone9.ogg", "tone11.ogg", "tone12.ogg");

for (var i=0; i<sounds.length; i++) {
    $('#sounds').append('<audio controls id="sound'+i+'"><source src="'+sounds[i]+'" type="audio/ogg" /></audio>');
}

$("#start").click(function() {
    for (i = 0; i < 3; i++) {           
        var id = 'sound' + (getRandomInt(0, sounds.length-1));
        window.setTimeout ("document.getElementById('"+id+"').play()", delays[i]);
    }
})