HTML Audio Player

audio_player.html

<script>
var play_state = false
var sound_index = -1

/*
Form:
[sound_effect_url, repeat]

Note: (null) entry means empty
*/
var sounds = [
   ['example.ogg', false]
];

// Setup players:
function setupAudioClips() {
    var audio_clips_element = document.getElementById("audio_clips")
    audio_clips_element.innerHTML = "";
    for (var snd in sounds) {
        _snd = sounds[snd]
        if (_snd) {
            var snd_name = _snd[0]
            loop = ""
            if (_snd[1]) {
                loop = "loop"
            }
            audio_clips_element.innerHTML += ("<audio " + loop + " id=\"" + snd_name + "\">"
            + "<source src=\"" + snd_name + "\"></audio>");
        }
    }
}
window.onload = setupAudioClips;

function set_sound(state) {
    if (sound_index>=-1 && sound_index<sounds.length) {
        console.log(sound_index)
        var sound_name = sounds[sound_index];
        console.log("Sound Name: " + sound_name);
        if (!(sound_name == null)) {
            sound_name = sound_name[0]
            console.log("Sound Name NOT null");
            snd = document.getElementById(sound_name);
            if (state) {
                console.log("Play sound");
                play_state = true;
                snd.play()
            } else {
                console.log("Pause sound");
                //play_state = false;
                snd.pause();
                snd.currentTime = 0
            }
        return sound_name;
        } else {
            console.log("Sound Name null");
            //play_state = false;
        }
    }
    return null;
}
document.onkeydown = function(e) {
    if (e.keyCode == 39 && sound_index<sounds.length){
        play_state = true;
        set_sound(false);
        sound_index++;
    } else if (e.keyCode == 37 && sound_index>=0){
        play_state = true;
        set_sound(false);
        sound_index--;
    } else if ([16, 32].includes(e.keyCode)) {
        play_state = !play_state;
    } else {
        // Exit if not a wanted key:
        return;
    }

    console.log("Key: " + e.keyCode);

    if (sound_index>=0 && sound_index<sounds.length) {
        var sound_name = set_sound(play_state);
    }

    // Print out history/playing/queue:
    now_playing_element = document.getElementById("now_playing");
    now_playing_element.innerHTML = "";
    for (var snd in sounds) {
        snd = parseInt(snd);
        new_sound_name = sounds[snd];
        if (new_sound_name) {
            new_sound_name = new_sound_name[0]
        }


        // Deal with null audio (breaks):
        if (!new_sound_name) new_sound_name = "EMPTY";

        var new_sound_string = ("\"" + new_sound_name + "\" (#" + (snd+1) + ")");

        if (snd == sound_index) {
            new_sound_string = "<strong> Now Playing: " + new_sound_string + "</strong>";
        }
        new_sound_string = "</br>" + new_sound_string;
        
        now_playing_element.innerHTML += new_sound_string;
    }

    var play_state_string = "Stopped";
    if (play_state) {
        play_state_string = "Playing";
    }
    console.log("Play State: " + play_state);
    document.getElementById("playing_status").innerHTML = "</br>" + play_state_string;

    console.log("Playing: " + sound_name + ", Index: " + sound_index);
}
</script>

<h1>Audio Clip Player</h1>
<h2>Keys:</h2>
<ul>
    <li>Left/Right Arrows: Previous/Next Audio Clip</li>
    <li>Shift, Space: Replay Audio Clip</li>
</ul>

<div id="now_playing"></div>
<div id="playing_status"></div>

<div id="audio_clips"></div>

example.ogg