By Jc

The last part is to create the logic of our audio player. To do so, we will create a JavaScript file and import it at the bottom of our HTML file. The code for this file is the one bellow:


var radio = new Audio();

radio.src = 'http://www.yourStreamingURLhere:8000';

radio.volume = 1;

radio.play();


var pButton = document.getElementById('plButton'); // play button


var volumeslider = document.querySelector('input');

volumeslider.addEventListener('input', function () {

volume(volumeslider.value);

}, false);


//Play and Stop

function play() {

// start music

    if (radio.paused) {

        radio.play();

        // remove play, add stop

        pButton.className = "";

        pButton.className = "stop";

    } else { // stop music and reset audio object

        radio.pause();

        radio = new Audio();

        radio.src =  'http://www.yourStreamingURLhere:8000';

        // remove stop, add play

        pButton.className = "";

        pButton.className = "play";

    }

}

function volume(value){

    volumeslider.value = value;

    radio.volume= value/100;

}

function volumeSlider(){

    var volumerange = document.getElementById('volumerange');

    var className = volumerange.className;


    if ( ~className.indexOf('visible') ) {

        volumerange.className = 'hide';

    } else {

        volumerange.className = 'visible';

    }

}

var xmlhttp=new XMLHttpRequest();

//Uncomment these lines below to make ‘nowplaying’ self invoking

//(

function nowplaying(){

    xmlhttp.open("POST","Your Server PHP URL to fetch info about now playing track",true);

    xmlhttp.send();

    xmlhttp.onreadystatechange=function()

    {

        if (xmlhttp.readyState==4 && xmlhttp.status==200)

        {

            document.getElementById("track-info").innerHTML=xmlhttp.responseText;

        }

    }

    setTimeout(nowplaying, 2000);

}

//)();



The above Javascript file has all the logic our audio player needs to be functional. The file consists of four functions. The first one is called ‘play()’ and what it does is to control the play/stop button. When the audio is not playing, then the function starts to play the audio and changes the class name of the button to show the stop icon. While the player is playing, if we press the stop button then it resets and recreates the audio element and changes the class name of the button to show the play icon.

The second function is the ‘volume()’ function, which accepts the input from the range slider and sets the volume accordingly. The max value of the range slider is 100 and the min is 0, but the volume of the audio element can take values between 0 and 1. Thats why we have to convert the coming value to a value between [0,1].

The third function controls the behavior of the div that holds the slider when the volume button is clicked. If the volume slider is visible and we click the button, then it hides it and shows it again if it is hidden.

The last function is a simple ajax request to the server which repeats itself every 2 seconds, in order to fetch information about the current playing song (singer - title). This function is a self invoking function but for this tutorial I commented out the wrapping lines (see comments in the code).


So, we created a fully custom and flexible audio player for our website, which you can style and customize according to your needs.

The audio element provide many events and attributes, which we can implement to our player above. These were the ones I wanted for my player but you can add more such as the duration of listening time or current track. You can read more abiut the audio tag here.