MP3 Player Using Javascript

Submitted by jaredgwapo on Thursday, January 21, 2016 - 16:53.
Language
JavaScript
In this tutorial, I will teach you how to make a mp3 player using javascript and html. just download the code to use it in your projects or systems.

Instructions

Creating our index.php page

  3. <title>Audio PLayer</title>
  4. <link href="css/style.css" rel="stylesheet" type="text/css">
  5. <script type="text/javascript" src="javascript/audio_player.js"></script>
  6. </head>
  8. <div id="container">
  9.  
  10.         <h1 id="playlist_status"></h1>
  11.         <div id="mp3_player">
  12.                 <canvas id="analyser_render"></canvas>
  13.         </div>
  14.         <button id="playpausebtn"></button>
  15.     <input id="seekslider" type="range" min="0" max="500" value="0" step="1">
  16.     <div id="timebox">
  17.         <span id="current_time">00:00</span>| <span id="duration_time">00:00</span>
  18.     </div>
  19.     <button id="mutebtn"></button>
  20.     <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
  21. </div>
  22. </div>
  23. </body>
  24. </html>

Creating our style.css page.

  1. /* CSS Document */
  2. body{
  3.         background:#f5f5f5;    
  4. }
  5. #container{
  6.         width:730px;
  7.         margin:50px auto;
  8.         padding:5px;
  9.         background:#000;
  10. }
  11. #playpausebtn{
  12.         background:url(../images/pause.jpg) no-repeat;
  13.         border:none;
  14.         width:30px;
  15.         height:30px;
  16.         cursor:pointer;
  17.         outline:none;
  18. }
  19. #mutebtn{
  20.         background:url(../images/speaker1.jpg) no-repeat;
  21.         border:none;
  22.         width:30px;
  23.         height:30px;
  24.         cursor:pointer;
  25.         outline:none;
  26. }
  27. #timebox{
  28.         display:inline-block;
  29.         width:80px;
  30.         background:#000;
  31.         border-bottom:1px solid #333;
  32.         text-align:center;
  33.         color:#090;
  34.         font-family:Verdana, Geneva, sans-serif;
  35.         font-size:11px;
  36. }
  37. input{
  38.         outline:none;
  39. }
  40. input#seekslider{
  41.         width:500px;
  42. }
  43. input#volumeslider{
  44.         width:70px;
  45. }
  46. input[type='range']{
  47.         -webkit-appearance:none !important;
  48.         margin:0px;
  49.         padding:0px;
  50.         background:#000;
  51.         height:13px;
  52.         border-bottom:1px solid #333;
  53. }
  54. input[type='range']::-ms-fill-lower{
  55.         background:#000;
  56. }
  57. input[type='range']::-ms-fill-upper{
  58.         background:#000;
  59. }
  60. input[type='range']::-moz-range-track{
  61.         border:none;
  62.         background:#000;
  63. }
  64. input[type='range']::-webkit-slider-thumb{
  65.         -webkit-appearance:none !important;
  66.         background:radial-gradient(#FFF, #333);
  67.         height:11px;
  68.         width:11px;
  69.         border-radius:100%;
  70.         cursor:pointer;
  71. }
  72. input[type='range']::-moz-range-thumb{
  73.         background:radial-gradient(#FFF, #333);
  74.         height:11px;
  75.         width:11px;
  76.         border-radius:100%;
  77.         cursor:pointer;
  78. }
  79. input[type='range']::-ms-thumb{
  80.         -webkit-appearance:none !important;
  81.         background:radial-gradient(#FFF, #333);
  82.         height:11px;
  83.         width:11px;
  84.         border-radius:100%;
  85.         cursor:pointer;
  86. }
  87. h1{
  88.         font-family:Verdana, Geneva, sans-serif;
  89.         font-size:12px;
  90.         color:#FFF;
  91.         padding:5px;
  92. }
  93.  
  94. #mp3_player{ width:700px; height:110px; background:#000; padding:5px; margin:10px auto; }
  95. #mp3_player > canvas{ width:700px; height:100px; background:#000; float:left; }

Creating our audio_player.js page

  1. // JavaScript Document
  2.  
  3.         var dir = "mp3/";
  4.         var playlist = ["sample","sample2","sample3"];
  5.         var playlist_index = 0;
  6.         var ext = ".mp3"
  7.         var audio = new Audio();
  8.         audio.src = dir+playlist[0]+ext;
  9.         audio.loop = false;
  10.         audio.autoplay = false;
  11.         audio.play();
  12.        
  13. var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
  14.  
  15. window.addEventListener("load", initMp3Player, false);
  16. function initMp3Player(){
  17.         context = new webkitAudioContext();
  18.         analyser = context.createAnalyser();
  19.         canvas = document.getElementById('analyser_render');
  20.         ctx = canvas.getContext('2d');
  21.         source = context.createMediaElementSource(audio);
  22.         source.connect(analyser);
  23.         analyser.connect(context.destination);
  24.         frameLooper();
  25. }
  26.  
  27. function frameLooper(){
  28.         window.webkitRequestAnimationFrame(frameLooper);
  29.         fbc_array = new Uint8Array(analyser.frequencyBinCount);
  30.         analyser.getByteFrequencyData(fbc_array);
  31.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  32.         ctx.fillStyle = '#FFF';
  33.         bars = 100;
  34.         for (var i = 0; i < bars; i++) {
  35.                 bar_x = i * 3;
  36.                 bar_width = 2;
  37.                 bar_height = -(fbc_array[i] / 2);
  38.                 ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
  39.         }
  40. }
  41.  
  42.  
  43.        
  44. function initAudioPlayer(){
  45.         var playbtn, mutebtn, seekslider, volumeslider, seeking=false, seekto, current_time, duration_time, playlist_status;
  46.         playbtn = document.getElementById("playpausebtn");
  47.         mutebtn = document.getElementById("mutebtn");
  48.         seekslider = document.getElementById("seekslider");
  49.         volumeslider = document.getElementById("volumeslider");
  50.         current_time = document.getElementById("current_time");
  51.         duration_time = document.getElementById("duration_time");
  52.         playlist_status = document.getElementById("playlist_status");
  53.        
  54.         playlist_status.innerHTML = "Track "+(playlist_index+1)+" - "+ playlist[playlist_index]+ext;
  55.        
  56.         playbtn.addEventListener("click",playPause);
  57.         mutebtn.addEventListener("click",mute);
  58.         seekslider.addEventListener("mousedown", function(event){ seeking=true; seek(event); });
  59.         seekslider.addEventListener("mousemove", function(event){ seek(event); });
  60.         seekslider.addEventListener("mouseup",function(){ seeking=false; });
  61.         volumeslider.addEventListener("mousemove", setvolume);
  62.         audio.addEventListener("timeupdate", function(){ seektimeupdate(); });
  63.         audio.addEventListener("ended", function(){ switchTrack(); });
  64.        
  65.         function switchTrack(){
  66.                 if(playlist_index == (playlist.length - 1)){
  67.                         playlist_index = 0;
  68.                 }else{
  69.                     playlist_index++;  
  70.                 }
  71.                 playlist_status.innerHTML = "Track "+(playlist_index+1)+" - "+ playlist[playlist_index]+ext;
  72.                 audio.src = dir+playlist[playlist_index]+ext;
  73.             audio.play();
  74.         }
  75.        
  76.        
  77.         function playPause(){
  78.                 if(audio.paused){
  79.                         audio.play();
  80.                         playbtn.style.background = "url(images/pause.jpg) no-repeat";
  81.                 }else{
  82.                         audio.pause();
  83.                         playbtn.style.background = "url(images/play.jpg) no-repeat";
  84.                 }
  85.         }
  86.        
  87.         function mute(){
  88.                 if(audio.muted){
  89.                         audio.muted = false;
  90.                         mutebtn.style.background = "url(images/speaker1.jpg) no-repeat";
  91.                 }else{
  92.                         audio.muted = true;
  93.                         mutebtn.style.background = "url(images/mute1.jpg) no-repeat";
  94.                 }
  95.         }
  96.        
  97.         function seek(event){
  98.                 if(seeking){
  99.                         seekslider.value = event.clientX - seekslider.offsetLeft;
  100.                         seekto = audio.duration * (seekslider.value / 500);
  101.                         audio.currentTime = seekto;
  102.                 }
  103.         }
  104.        
  105.         function setvolume(){
  106.                 audio.volume = volumeslider.value / 100;
  107.         }
  108.        
  109.         function seektimeupdate(){
  110.                 var new_time = audio.currentTime * (500 / audio.duration);
  111.                 seekslider.value = new_time;
  112.                 var current_mins = Math.floor(audio.currentTime / 60);
  113.                 var current_secs = Math.floor(audio.currentTime - current_mins * 60);
  114.                 var duration_mins = Math.floor(audio.duration / 60);
  115.                 var duration_secs = Math.floor(audio.duration - duration_mins * 60);
  116.                 if(current_secs < 10){ current_secs = "0"+current_secs; }
  117.                 if(duration_secs < 10){ duration_secs = "0"+duration_secs; }
  118.                 if(current_mins < 10){ current_mins = "0"+current_mins; }
  119.                 if(duration_mins < 10){ duration_mins = "0"+duration_mins; }
  120.                 current_time.innerHTML = current_mins+":"+current_secs;
  121.                 duration_time.innerHTML = duration_mins+":"+duration_secs;
  122.         }
  123. }
  124. window.addEventListener("load",initAudioPlayer);
Thats it, you have successfully created a mp3 player. For more questions, informations, suggestion just comment below or email me at [email protected]

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags
MP3
mp3 player
mp3 player using javascript

Add new comment

About text formats
  • 1433 views