Skip to main content

MP3 Player Using Javascript

Language


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

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

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.