• 1
  • 2
Home > Tips

Free HTML5 Music Player - How to Create HTML5 Music Player



 

 


 Brief Introduction to the HTML5 Music Player

The HTML5 music player was created by Laurent (Laurent@slicemaker.com), one of the staffs of SliceMaker Soft. The timer was created by using jQuery. The style of the HTML5 music player is similar to the Apple Mac style.

The whole HTML5 music player consists of three parts:
1) The top part consists of Title, Minimize Button, Maximize Button and Close Button (Note: the 3 buttons were not added)
2) The middle part consists of three parts: the first part is the play and pause button, the second button is the stop button and the third part is the timer part. (Note: the timer was created by using jQuery)
3) The bottom part is the processing time part.



 How to Create the HTML5 Music Player?

After make a brief introduction to the HTML5 music player, now lets start learning how to create the HTML5 music player.

It is not difficult to create the HTML5 music player; we can use CSS3 border-radius, CSS3 Shadows, CSS3 Gradient and @font-face to create it. (Of course, we need to use jQuery to create the timer).

To help you understand better how to create the HTML5 music player, wed like to share the related codes for the HTML5 music player and there are necessary explanations within the codes. However, if you are not familiar with the codes, please feel free to download the sample directly and then edit it for your own use or you can contact the author of the HTML5 music player - Laurent (Laurent@slicemaker.com) for help.



HTML Codes for the HTML5 Music Player

 < div class='box'>
  < div class='boxt'>
    < span class='fr minitxt'> Mini Player< /span>
    < span class='circle'>
      < em class='close'> < /em>
      < em class='max'> < /em>
      < em class='min'> < /em>
    < /span>
  < /div>
  < div class='boxm'>
    < div class='boxml'>
      < a class='btn pause' id='controlBtn'> on< /a>
      < a class='btn stop' id='stopBtn'> stop< /a>
    < /div>
    < div class='boxmr'>
      < div class='taketime' id='takeTime'> 00:00:00< /div>
      < span> HOUR< /span>
      < span> MIN< /span>
      < span> SEC< /span>
    < /div>
  < /div>
  < div class='boxb'>
    < span class='fr' id='totalTime'> 01:22:30< /span>
    < span> Totel time< /span>
  < /div>
< /div>


CSS Codes for the HTML5 Music Player

 

body{
  padding:0;
  margin:0;
  background:#cbd4da;
  font-size:12px;
}
/*Explanation: The panel container of the music player */
.box{
  width:320px;
  margin:100px auto;
  background:#fff;
  border:solid 1px #979797;
  border-radius:6px;/*Explanation: Create the border radius*/
  box-shadow:0 0 5px 6px rgba(0,0,0,0.05); /*Explanation: Create the shadow for the panel */
}
/*Explanation: the header of the music players panel */
.boxt{
  height:40px;
  line-height:40px;
  padding:0 16px;
}
.boxt .minitxt{
  font-size:bold 14px Arial;
  color:#7e97ab;
}
/*Explanation: the little 3 rounded buttons that imitate the window buttons of Mac  */
.boxt .circle em{
  display:inline-block;
  background:#e4e4e4;
  border:solid 1px #c7c9cb;
  border-radius:8px;
  width:12px;
  height:12px;
  margin-right:8px;
  border:none;
  border-radius:6px; 
  cursor: pointer;
}
/*Explanation: the close button */
.boxt .circle .close{
  box-shadow:inset 0px 1px 1px rgba(83,11,8,.5);
  background:-*-radial-gradient(top center, circle, #fff, #af2b24, #ec8e89);
}
/*Explanation: the maximize button */
.boxt .circle .max{
  box-shadow:inset 0px 1px 1px rgba(117,38,27,.5);
  background:-*-radial-gradient(top center, circle, #fff, #ce712d, #fcdf7d);

}
/*Explanation: the minimize button */
.boxt .circle .min{
  box-shadow:inset 0px 1px 1px rgba(34,75,15,.5);
  background:-*-radial-gradient(top center, circle, #fff, #74a94e, #bbdd83);
}
/*Explanation: The middle contents of the panel*/
.boxm{
  border:solid 1px #dedede;
  border-width:1px 0;
  padding:20px 16px;
  overflow:hidden;
}
/*Explanation: The play button of the panel*/
.boxm .boxml{
  float:left;
  padding-top:5px;
}
/* Explanation: Basic styles for the buttons */
.boxm .boxml .btn{
  display:inline-block;
  width:45px;
  height:40px;
  padding-top:5px;
  border:none;
  border-radius:25px;
  text-align:center;
  font-size:0;cursor:pointer;
  box-shadow:inset 0 1px 1px rgba(100,100,100,.3);
  background:-*-linear-gradient(top,#e6e6e6,#f2f1f1);
}
/* Explanation: use font face to create icon*/
@font-face{
  font-family:'playericon';
  src:url(font/fontello.eot);
  src:url(font/fontello.eot#iefix) format('embedded-opentype'),
  url(font/fontello.woff) format('woff'),
  url(font/fontello.ttf) format('truetype'),
  url(font/fontello.svg) format('svg');
  font-weight:normal;
  font-style:normal;
}

.btn:after{
  font-family:'playericon';
  display:inline-block;
  width:35px;
  height:35px;
  border:none;
  border-radius:20px;
  font-size:18px;
  line-height:35px;
  text-align:center;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.4);
  background:-*-linear-gradient(top,#fff,#e9e9e9);
}
/*Explanation: the play icon*/
.on:after{
  content:'\25B6';
  color:#475057;
}
/*Explanation: The stop icon*/
.stop:after{
  content:'\25A0';
  color:#cf6767;
}
/*Explanation: The pause icon*/
.pause:after{
  content:'\2389';
  color:#475057;
}
.btn:hover:after{
  color:#19a6e4;
  box-shadow:0 -1px 0px 1px #ccc;
}
/*Explanation: The timer part */
.boxm .boxmr{
  font-family:Arial;
  color:#666;
  text-align:right;
  overflow: hidden;
}
.boxm .taketime{
  font-size:30px;
}
.boxm span{
  display:inline-block;
  padding:0 10px;
  font-size:9px;
  -webkit-text-size-adjust:none;
}
/*Explanation: Styles for the bottom part */
.boxb{
  height:40px;
  line-height:40px;
  padding:0 16px;
  border-top:solid 1px #fff;
  background:#eee;
  font-size:14px;
  font-family:Arial;
  color:#999;
  border-radius:6px;
}
.fr{float:right;}



 Terms of use for the HTML5 Music Player

The HTML5 music player was created by SliceMaker staff, all rights are reserved by SliceMaker Soft, Inc.

SliceMaker Soft allows their users to free download the HTML5 music player and then edit the HTML5 music player for their own use. If you are interested in this HTML5 music player, please feel free to download it. If you have problem understanding or editing the HTML5 music player, please feel free to contact our support team (support@slicemaker.com) or the author - Laurent (laurent@slicemaker.com) for help.

 

 

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0