index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Radio Disorient</title>
        <style>
            body { font: sans-serif; }
            #d { 
                position: absolute;
                top: 50%;
                left: 50%;
                width: 25%;
                margin-left: -12.5%;
                margin-top: -12.5%;
                cursor: pointer;
            }

            #playstop {
                position: absolute;
                left: 50%;
                top: 50%;
                text-align: center;
                width: 5%;
                margin-top: -5%;
                margin-left: -2.5%;
                z-index: -1;

            }
        </style>
    </head>
    <body>
        <img id="d" src="d.png" />
        <audio id="player"></audio>

        <img id="playstop" src="play.png" />
        <script>
            var list = [ 
                "INTRO AUDIO 90.3 FEMALE.wav",
                "THE ALL NIGHTER.wav",
                "SATELLITE SEANCES BREAK.mp3",
                "Sound_PSA.mp3",
                "90.3 tag male radio synth.wav",
                "TICKS PSA.mp3"
            ]
            var index = 0
            var button = document.getElementById('d');
            var player = document.getElementById('player');
            var playstop = document.getElementById('playstop');
    
            function play() {
                if (player.currentTime > 0 && !player.paused) {
                    player.pause();
                    playstop.src = "play.png";
                }
                else {
                    playstop.src = "stop.png";
                    console.log("Playing " + index + ": " + list[index]);
                    player.src = list[index];
                    player.play();

                    index += 1;
                    if (index >= list.length) {
                        index=0;
                    }
                }
            }

            button.addEventListener("click", play);
            player.addEventListener("ended", play);

        </script>
    </body>
</html>