Create an Audio Player In HTML5, jQuery and CSS

In this article we will discuss how to create a simple audio player using HTML5, CSS and jQuery. Here we use a HTML5 <audio> tag, jQuery Scroller and many CSS Styles to make the Audio Player like this:



Step 1

First we take the following Image (MYPLayer.png) and set it in the background like this:

<div style="background-image:url(MYPLayer.png);height:210px;width:335px;">
</div>

Step 2

After that we will take an <audio> tag of HTML5 like this:

<audio id="player" ></audio>

Step 3

After that we will take the images for our Play, Pause, Stop, Previous and Next Button.

Step 4

Now we will write the code for Play Button:

<img id="imgplay" onclick="PlayMusic()" onmouseout="this.style.opacity=1" onmouseover="this.style.opacity=0.7" src="Image\MainPlay Button.png" />

Here we set the opacity of the image and set the source of the image. The output will be:



Now we will write the code for the Click event of the Play Button:

function PlayMusic()
{
document.getElementById('imgplay').src="Image/ClickPlayButton.png";
document.getElementById('player').play();
}

Here we change the source of the Play Image Button so the output will be:



JavaScript code

And we define the play() to play the selected audio file.

Step 5

Now we will be write the code for the Pause Button.

For that we first take the following image:



<img id="stopmusic"  onclick="StopMusic()"   src="Image\Stop Button.png" onmouseout="this.style.opacity=1" onmouseover="this.style.opacity=0.7" />

Now we write the JavaScript code:

function PauseMusic()
{
document.getElementById('pausemusic').src="Image/ClickPauseButton.png";
document.getElementById('player').pause();
}

Step 6

Now we write the code for the Stop Button:

<img id="stopmusic" onclick="StopMusic()" src="Image\Stop Button.png" onmouseout="this.style.opacity=1" onmouseover="this.style.opacity=0.7" />

Now we will write the JavaScript code:

function StopMusic()
{
document.getElementById('stopmusic').src="Image/ClickStopButton.png";
document.getElementById('player').src="";
document.getElementById('ploop').style.display='none';
}

Step 7

Now we will be write the code for the Previous Music Button:

<img id="playpreviousmusic" src="Image\Previous Button.png" onmouseout="this.style.opacity=1" onmouseover="this.style.opacity=0.7" onclick="PlayPreviousMusic()" />

Now we will write the JavaScript code:

function PlayPreviousMusic1()
{
document.getElementById('playpreviousmusic').src="Image/Previous Button.png";
}

Step 8

Now we will write the code for the Next Music Button:

<img id="playnextmusic" src="Image\NextButton.png" onmouseout="this.style.opacity=1" onmouseover="this.style.opacity=0.7" onclick="PlayNextMusic()" />

Now we will write the JavaScript code:

function PlayNextMusic()
{
document.getElementById('playnextmusic').src="Image/ClickNextButton.png";
}

Step 9

Now we will write the code for the loop, it will run automatically. When the song is finshed it will stop. For this use the following procedure:

<p id="ploop" style="color:#3F6B7B;font-size:small;"></p>

public partial class _Default : System.Web.UI.Page
{
function Loop()
{
var duration = document.getElementById('ploop');
var s = parseInt(document.getElementById('player').currentTime);
var x= parseInt(document.getElementById('player').currentTime)/s;
var m = parseInt((document.getElementById('player').currentTime));
duration.innerHTML = '0' + m;
if(document.getElementById('player').ended)
{
document.getElementById('ploop').innerHTML="";
}
else
{
setTimeout("Loop()",200);
}

Step 10

Now we will look at the Volume Control.

Here we take a jQuery Data Slider like this:

<input type="text" id="Text1" value="0.2" data-slider="true" style="margin:0 0 0px 0px;color:White;" onmouseout="this.style.opacity=1" onmouseover="this.style.opacity=0.7"/></p>

<script>

    $(function () {

        $("#slider").slider({

            value: 100,

            min: 0,

            max: 500,

            step: 50,

            slide: function (event, ui) {

                $("#amount").val("$" + ui.value);

            }

        });

        $("#amount").val("$" + $("#slider").slider("value"));

    });

</script>

Here we specify the CSS of that control; we will also include the JavaScript files, so the output will be:



Step 11

Now we will specify the list of the songs like this:
 

<span class="content">

<p id="p1" onclick="Play1()" onmouseover="ShowAudio()" onmouseout="hide()" style="text-indent:5px;margin:0px 0px 0px 0px;width:100%;border-bottom-style: solid;background:#E6EFF1;font-family:'Average Sans', sans-serif;font-size:10px;color:#5C99AF; border-bottom-width: 2pt; border-bottom-color:#9FC4CA;">1. Hosaana My Dream </p>

<p id="p2" onmouseover="Show1()" onmouseout="hide1()" style="margin:0 0 0px 0px;text-indent:5px;border-bottom-style: solid;background:#E6EFF1;font-family:'Average Sans', sans-serif;font-size:9px;color:#5C99AF; border-bottom-width: 2pt; border-bottom-color:#9FC4CA;" onclick="Play2()">2. Bin Tere</p>

<p id="p3" onmouseover="Show2()" onmouseout="hide2()" style="margin:0 0 0px 0px;text-indent:5px;border-bottom-style: solid;background:#E6EFF1;font-family:'Average Sans', sans-serif;font-size:9px;color:#5C99AF; border-bottom-width: 2pt; border-bottom-color:#9FC4CA;" onclick="Play3()">3. I Love You </p>

 

<p id="p4" onmouseover="Show3()" onmouseout="hide3()" style="margin:0 0 0px 0px;text-indent:5px;border-bottom-style: solid;background:#E6EFF1;font-family:'Average Sans', sans-serif;font-size:9px;color:#5C99AF; border-bottom-width: 2pt; border-bottom-color:#9FC4CA;" onclick="Play4()">4. Oh Hum Dum</p>

<p id="p5" onouseover="Show4()" onmouseout="hide4()" style="margin:0 0 0px 0px;text-indent:5px;border-bottom-style: solid;background:#E6EFF1;font-family:'Average Sans', sans-serif;font-size:9px;color:#5C99AF; border-bottom-width: 2pt; border-bottom-color:#9FC4CA;" onclick="Play5()">5. Lakshya</p>

<p id="p6" onmouseover="Show5()" onmouseout="hide5()" style="margin:0 0 0px 0px;text-indent:5px;border-bottom-style: solid;background:#E6EFF1;font-family:'Average Sans', sans-serif;font-size:9px;color:#5C99AF; border-bottom-width: 2pt; border-bottom-color:#9FC4CA;" onclick="Play6()">6. Dil Se </p>

<p id="p7" onmouseover="Show6()" onmouseout="hide6()" style="margin:0 0 0px 0px;text-indent:5px;border-bottom-style: solid;background:#E6EFF1;font-family:'Average Sans', sans-serif;font-size:9px;color:#5C99AF; border-bottom-width: 2pt; border-bottom-color:#9FC4CA;" onclick="Play7()">7. Sheher Main</p>

<p id="p8" onmouseover="Show7()" onmouseout="hide7()" style="margin:0 0 0px 0px;text-indent:5px;border-bottom-style: solid;background:#E6EFF1;font-family:'Average Sans', sans-serif;font-size:9px;color:#5C99AF; border-bottom-width: 2pt; border-bottom-color:#9FC4CA;" onclick="Play8()">8.Hosaana My Dream</p>

</span>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>    !window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>

<!-- custom scrollbars plugin -->

<script src="jquery.mCustomScrollbar.concat.min.js"></script>

<script>

    (function ($) {

        $(window).load(function () {

            $(".content").mCustomScrollbar();

        });

    })(jQuery);

</script>

The output will be:



So when we click on the first song the song will play; for this we write the following code:
 

<p id="p1" onclick="PlayMusic1()" onmouseover="ShowAudio()" onmouseout="hide()" style="text-indent:5px;margin:0px 0px 0px 0px;width:100%;border-bottom-style: solid;background:#E6EFF1;font-family:'Average Sans', sans-serif;font-size:10px;color:#5C99AF; border-bottom-width: 2pt; border-bottom-color:#9FC4CA;">1. Hosaana My Dream </p>
 

function PlayMusic1()

{

document.getElementById("pmarquee").innerHTML=document.getElementById("p1").innerHTML;

document.getElementById('player').src="Hosanna - Ek Deewana Tha.wav";

document.getElementById('player').type="audio/wav";

document.getElementById('player').play();

document.getElementById('imgplay').src="Image/ClickPlayButton.png";

document.getElementById('pausemusic').src="Image/PauseButton.png";

document.getElementById('stopmusic').src="Image/Stop Button.png";

b=1;

document.getElementById('p1').style.backgroundColor='black';

document.getElementById("p2").style.backgroundColor = '#E6EFF1';

document.getElementById("p3").style.backgroundColor = '#E6EFF1';

document.getElementById("p4").style.backgroundColor = '#E6EFF1';

document.getElementById("p5").style.backgroundColor = '#E6EFF1';

document.getElementById("p6").style.backgroundColor = '#E6EFF1';

document.getElementById("p7").style.backgroundColor = '#E6EFF1';

document.getElementById("p8").style.backgroundColor = '#E6EFF1';

Loop();

}

Here we specify the source and type of the player and specify the function Play() in order to play the song. So when we click on it, the output will be something like:



Like this we can set the other songs in the list.

Note: In this program, I used the wav format of my songs, as some Browsers can't support the MP3 format.

Step 12

Now we will look at the code once again:

<p id="p1" onclick="PlayMusic1()" onmouseover="ShowAudio()" onmouseout="hideAudio()" style="text-indent:5px;margin:0px 0px 0px 0px;width:100%;border-bottom-style: solid;background:#E6EFF1;font-family:'Average Sans', sans-serif;font-size:10px;color:#5C99AF; border-bottom-width: 2pt; border-bottom-color:#9FC4CA;">1. Hosaana My Dream </p>

Here we specify two more functions for changing the color of the track name in the list on the onmouseover event like this:



function ShowAudio()
{
if(b==1)
{
document.getElementById("p1").style.backgroundColor = 'Black';
}
else
{
document.getElementById("p1").style.backgroundColor = '#B4DEE6';
}
}

So when we click on it and listen to the songs it will be Black otherwise it will be (#B4DEE6).

Using these steps we create a simple Audio Player Like this: