Post
Ask Question

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
 
HTMl.jpg
 
Step 1
 
First, we take the following Image (MYPLayer.png) and set it in the background like this:
  1. <div style="background-image:url(MYPLayer.png);height:210px;width:335px;">  
  2. </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:
  1. <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:
 
HTML1.jpg
 
Now we will write the code for the Click event of the Play Button:
  1. function PlayMusic()  
  2. {  
  3.       document.getElementById('imgplay').src="Image/ClickPlayButton.png";  
  4.       document.getElementById('player').play();  
  5. } 
Here we change the source of the Play Image Button so the output will be
 
HTML3.jpg
 
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:
 
HTML4.jpg
  1. <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:
  1. function PauseMusic()  
  2. {  
  3.        document.getElementById('pausemusic').src="Image/ClickPauseButton.png";  
  4.        document.getElementById('player').pause();  
  5. } 
Step 6
 
Now we write the code for the Stop Button:
  1. <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:
  1. function StopMusic()  
  2. {  
  3.         document.getElementById('stopmusic').src="Image/ClickStopButton.png";  
  4.         document.getElementById('player').src="";  
  5.         document.getElementById('ploop').style.display='none';  
  6. } 
Step 7
 
Now we will be writing the code for the Previous Music Button:
  1. <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:
  1. function PlayPreviousMusic1()  
  2. {  
  3.          document.getElementById('playpreviousmusic').src="Image/Previous Button.png";  
  4. }
Step 8
 
Now we will write the code for the Next Music Button:
  1. <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:
  1. function PlayNextMusic()  
  2. {  
  3.       document.getElementById('playnextmusic').src="Image/ClickNextButton.png";  
  4. } 
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:
  1. <p id="ploop" style="color:#3F6B7B;font-size:small;"></p>  
  2.   
  3. public partial class _Default : System.Web.UI.Page  
  4. {  
  5. function Loop()  
  6. {  
  7. var duration = document.getElementById('ploop');  
  8. var s = parseInt(document.getElementById('player').currentTime);  
  9. var x= parseInt(document.getElementById('player').currentTime)/s;  
  10. var m = parseInt((document.getElementById('player').currentTime));  
  11. duration.innerHTML = '0' + m;  
  12. if(document.getElementById('player').ended)  
  13. {  
  14. document.getElementById('ploop').innerHTML="";  
  15. }  
  16. else  
  17. {  
  18. setTimeout("Loop()",200);  
  19. } 
Step 10
 
Now we will look at the Volume Control. Here we take a jQuery Data Slider like this:
  1. <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>  
  2. <script>  
  3.     $(function () {  
  4.         $("#slider").slider({  
  5.             value: 100,  
  6.             min: 0,  
  7.             max: 500,  
  8.             step: 50,  
  9.             slide: function (event, ui) {  
  10.                 $("#amount").val("$" + ui.value);  
  11.             }  
  12.         });  
  13.         $("#amount").val("$" + $("#slider").slider("value"));  
  14.     });  
  15. </script> 
Here we specify the CSS of that control; we will also include the JavaScript files, so the output will be
 
HTML5.jpg
 
Step 11
 
Now we will specify the list of the songs like this:
  1. <span class="content">  
  2. <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>  
  3. <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>  
  4. <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>  
  5.    
  6. <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>  
  7. <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>  
  8. <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>  
  9. <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>  
  10. <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>  
  11. </span>  
  12. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
  13. <script>    !window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>  
  14. <!-- custom scrollbars plugin -->  
  15. <script src="jquery.mCustomScrollbar.concat.min.js"></script>  
  16. <script>  
  17.     (function ($) {  
  18.         $(window).load(function () {  
  19.             $(".content").mCustomScrollbar();  
  20.         });  
  21.     })(jQuery);  
  22. </script>
The output will be
 
HTML6.jpg
 
So when we click on the first song the song will play; for this, we write the following code:
  1. <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>  
  2.    
  3. function PlayMusic1()  
  4. {  
  5. document.getElementById("pmarquee").innerHTML=document.getElementById("p1").innerHTML;  
  6. document.getElementById('player').src="Hosanna - Ek Deewana Tha.wav";  
  7. document.getElementById('player').type="audio/wav";  
  8. document.getElementById('player').play();  
  9. document.getElementById('imgplay').src="Image/ClickPlayButton.png";  
  10. document.getElementById('pausemusic').src="Image/PauseButton.png";  
  11. document.getElementById('stopmusic').src="Image/Stop Button.png";  
  12. b=1;  
  13. document.getElementById('p1').style.backgroundColor='black';  
  14. document.getElementById("p2").style.backgroundColor = '#E6EFF1';  
  15. document.getElementById("p3").style.backgroundColor = '#E6EFF1';  
  16. document.getElementById("p4").style.backgroundColor = '#E6EFF1';  
  17. document.getElementById("p5").style.backgroundColor = '#E6EFF1';  
  18. document.getElementById("p6").style.backgroundColor = '#E6EFF1';  
  19. document.getElementById("p7").style.backgroundColor = '#E6EFF1';  
  20. document.getElementById("p8").style.backgroundColor = '#E6EFF1';  
  21. Loop();  
  22. } 
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
 
HTML7.jpg
 
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:
  1. <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
 
HTML8.jpg
  1. function ShowAudio()  
  2. {  
  3.     if(b==1)  
  4.     {  
  5.         document.getElementById("p1").style.backgroundColor = 'Black';  
  6.     }  
  7.     else  
  8.     {  
  9.         document.getElementById("p1").style.backgroundColor = '#B4DEE6';  
  10.     }  
  11. } 
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
 
html9
 


Similar Articles