JSFiddle - React, Tailwind, and code Playground

by Donal Devine

HTML

<p class="message"></p>
<p id="play">Play</p>
<p id="pause">Pause</p>
<p id="skip">Next</p>
<audio id="audioPlayer" class="audio-player" src=""></audio>

CSS

p {
    cursor: pointer;
    font-size: 20px;
    color: blue;
    text-decoration: underline;
}
.message {
    cursor: default;
    color: black;
    text-decoration: none;
}

JavaScript

$(document).ready(function () {

    var audioFiles = [
        "https://dl.dropboxusercontent.com/u/64455636/tumblr/music/1/Apollo.mp3",
        "https://dl.dropboxusercontent.com/u/64455636/tumblr/music/1/Daydreamer.mp3",
        "https://dl.dropboxusercontent.com/u/64455636/tumblr/music/1/Delayed%20Friend%20Request.mp3"];
    
    var z = 0;
    var audioPlayer = $("#audioPlayer")[0];
    
    var playAudio = function(){
        audioPlayer.src = audioFiles[z];
        audioPlayer.load();
        audioPlayer.play();    
    }

    $("#play").click(function () {
        playAudio();
        $(".message").text("Playing Song");
    });
    $("#pause").click(function () {
        audioPlayer.pause();
        $(".message").text("Song Paused");
    });
    $("#skip").click(function () {
        audioPlayer.pause();
        z++;
        if (z >= audioFiles.length) z = 0;
        playAudio();
        audioPlayer.currentTime = 0;
        $(".message").text("Next Song");
    });
});