Type Here to Get Search Results !

Mp3 player with controls using HTML, CSS, JavaScript on blogger

Hey there,
    Here, how we create a Mp3 Player to play live music radio on blogger or blogspot website.




So, Qualities of our Music Player will be:

  • Music player can to used to play all audio files by defining audio format like .mp3, .obb, .wav, etc.
  • Responsive Music Player.
  • Using CSS, JavaScript, JQuery, and HTML attractive designed.
  • Compatible with all themes.
  • Also Install on any html website supporting jquery.
  • User friendly.
  • Album Art with Disc like rotating animation while playing music.
  • Seek bar to seek at different time in the music.
  • Play/Pause button
  • Live Volume Control.
  • Repeat On/Off Switch.
--------------------------------------------------------

To create the Music Player, please follow these steps:

Download the source code for HTML, CSS, and JS by following links:

Method I (Adding CSS Code In Layout Section)

1. Login to blogger.com and go layout tab in your Blogger.com.



2. Add new HTML gadget. And paste the given code in it. And Save it.


Method II (Adding Code In Theme Editor)

1. If you are done with Method I then skip this method, 
2. Open Theme Editor from Theme Section.
3. to Edit Theme Section and Search for </head> Tag. And paste the Given code before the closing head tag.

2. Installing JS/Script  Code

Method I (Adding JS/Script Code In Layout Section)

1. Login to blogger.com and go layout tab in your Blogger.com.



2. Add new HTML gadget. And paste the given code in it. And Save it.


Method II (Adding Code In Theme Editor)

  1. If you are done with Method I then skip this method, 
  2. Open Theme Editor from Theme Section.
  3. In Editor and Search for </body> Tag. And paste the Given code before the closing body tag.

3. Installing HTML Code

  1. Download HTML Code. from Download HTML Source Code.
  2. To install html code, create a post.


  3. Edit as HTML View. Paste the given HTML code here.

4. Adding Music File to mp3 player:

  1. To add music file. change the value for album-art="thumbnail.jpg" and  file-url="file.mp3" as shown in the image.
  2.  

All done check the page preview.

If  you have any query, please comment below.

Post a Comment

2 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.