Make MP3 Player with HTML5 - [basic]

With HTML5, you can enter the Music Player to your website without having to use third-party plug-in or add-on, such as Flash Player, or QuickTime. For the code to be written is very convenient for the existing player (default), but there is a bit more complicated for you who want to customize self because you need JavaScript enabled to create a command button.

Audio Tag

You can use the Audio Tag to play your songs with accompanying control.

You will get the following results.

Create a command button with JavaScript

First, following coding Script in Head Tag space by using a script tag

 var player;     
      //Initial code
 window.onload = function()
 {
  document.getElementById('btnPlay').addEventListener('click', playMusic, false);
  document.getElementById('btnPause').addEventListener('click', pauseMusic, false);
  document.getElementById('btnStop').addEventListener('click', stopMusic, false);
  document.getElementById('btnVolUp').addEventListener('click', volUp, false);
  document.getElementById('btnVolDown').addEventListener('click', volDown, false);
  player = document.getElementById('player');
 }
      //controls 
 function playMusic()
 {
  player.play(); 
 }
 function pauseMusic()
 {
  player.pause();
 }
 function stopMusic()
 {
                //not method STOP 
  player.pause();                 
  player.currentTime = 0;
 }
 function volUp()
 {
                //sound level 0.0 = silent and 1.0 = full volume
  if(player.volume < 1) 
                { 
                    player.volume += 0.1; } 
  else { 
                    player.volume = 1;  
                } 
         }
         function volDown() { 
                if(player.volume > 0) {
       player.volume -= 0.1;
                }
                else {
       player.volume = 0;
  }
 }