Create an Audio Player In HTML5, jQuery and CSS

Introduction

In this article, we will discuss how to create a simple audio player using HTML5, CSS, and jQuery. Here we use an 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 writing 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 writing 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 finished 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>
<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 on 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

7 Comments

Join the conversation! Your thoughts help the community grow.

vinay kashyap12y ago
Good Coding
Sourabh Somani12y ago
nice :)
Abhishek Jaiswal12y ago
I guess HTML5 only supports MP4, OGG, WEBM.
Vithal Wadje12y ago
great one,can i play .MOV video files ?
Abhishek Jaiswal12y ago
Pretty cool!
Mahak Gupta13y ago
Thanks
Mostafa Eyni13y ago
very very very thank you ,best regards.