JSFiddle - React, Tailwind, and code Playground

by cmbuckley

HTML

<button id=test>Click to play</button>
<div id=element></div>

JavaScript

var sounds = [];

// Return the full list of URLs in random order
function getSounds() {
    return [
        // so tinny...
        'http://www.freesound.org/data/previews/169/169198_1587259-lq.mp3',
        'http://www.freesound.org/data/previews/169/169196_1587259-lq.mp3',
        'http://www.freesound.org/data/previews/169/169203_1587259-lq.mp3',
        'http://www.freesound.org/data/previews/169/169202_1587259-lq.mp3',
        'http://www.freesound.org/data/previews/169/169201_1587259-lq.mp3'
    ].sort(function () {
        // http://stackoverflow.com/a/18650169/283078
        return (.5 - Math.random());
    });
}

// Play the next sound
function playSound() {
    if (!sounds.length) {
        // Get the list of sounds (random order)
        sounds = getSounds();
    }

    // Pops a URL every time, ensuring all are played exactly once
    $("#element").html(
        '<embed src="' + sounds.pop() +
        '" hidden="true" autostart="true" />'
    );

    // Once all the URLs have been popped, the array is repopulated
}

$('#test').click(playSound);