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:
1. Installing CSS Code
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)
- If you are done with Method I then skip this method,
- Open Theme Editor from Theme Section.
- In Editor and Search for </body> Tag. And paste the Given code before the closing body tag.
3. Installing HTML Code
- Download HTML Code. from Download HTML Source Code.
- To install html code, create a post.
- Edit as HTML View. Paste the given HTML code here.
4. Adding Music File to mp3 player:
- To add music file. change the value for album-art="thumbnail.jpg" and file-url="file.mp3" as shown in the image.
All done check the page preview.
If you have any query, please comment below.
I ll try it👍
ReplyDeleteThankyou. Please share and keep supporting.
Delete