Live demo of the music player is here.
There are several occasions when you would like to add music to your blogs. While music bloggers need to do this all the time who review songs, albums, create their own tracks and share it with their audience. Many other bloggers love to play music on their blogs during festivals and occasions like Christmas, Diwali, Holi or Independence day.
You would have seen music players embeded and floating on all the pages of websites like Pandora, Last.fm, Saavn or Gaana
With this tutorial you will be able to put a similar floating MP3 player on your blog playing your favorite audio songs for your audience.
This is What You Will Get From This Tutorial
A floating music player for your blog [Live Demo]
How To Add Audio / MP3 Files To Your Blog
It’s a simple two step process.
As Blogger doesn’t allow us to directly upload, host and play MP3 files on BlogSpot blogs, so in order to add MP3 files to Blogger you need to do two things:
- Step #1: Create your playlist of songs – as a custom music player
- Step #2: Embed the player in your blog
Step #1: Create Your Playlist
Although websites like Soundcloud and Podsnack are quite famous for uploading songs and creating playlists, but I don’t recommend them. Mainly because of these 2 reasons:
1. They are definitely reliable but most of their services are paid, so until and unless you have some commercial plans with the music files I would not recommend them to you.
2. There are many limitations in terms of customizing the music players. A big turn off, as other free services mentioned here in this article will give much more freedom to you to customize their players.
These are the services that I recommend:
Again, Cincopa is quite famous and reliable, but customization of the player is very limited. Moreover if you do not upgrade to their premium plans, then you may very soon run out of bandwidth as per their free plan:
Wikplayer and SCMPlayer are both relatively new but they do have all the customization options which is expected from an embedable music player. So let’s see what do they offer…
These are some of the features of the music player from Wikplayer:
Your music source can be anything from MP3 files, exfm, SounCloud, RSS or even YouTube (just grab a youtube video URL)
Continuous playback – You can still continue listening to the music while you browse to other webpages
Built-in music playlist – User can expand the music playlist easily
Full playback control – Play, fast-forward, next, back, pause, shuffle, repeat and volume control
Comment Module & Social Sharing – Add Facebook Comments module via hybrid player skin + Share current playing song easily!
SCMPlayer also offers similar features:
Continuous Playback Cross Pages – Seamless playback throughout your website.
Full Featured Control – Play, pause, next, previous, seek, shuffle, repeat mode, volume and more.
Custom Skins – Match your look and feel. Choose or design your own skin with CSS.
Dynamic Playlist – Music from various sources: MP3, SoundCloud, Youtube, RSS in HTML5 or Flash.
Flexible UI – Dockable player on top or bottom. Playlist can be toggled.
Setup Wizard – Create your SCM Music Player without any pain.
Most of the music player skins offered by Wikplayer and SCMPlayer are exactly the same, but I am going with Wikplayer for this tutorial because of their one additional set of skins – Hybrid Skins: Mickey Mouse, Up and RoseLove (so that I could add some colors and my favorite cartoons to this tutorial):
Creating a music player on Wikplayer is really simple and just a 4 step process:
- In Step #1 select “Create New Playlist”.
- In Step #2 choose the skin of your choice for the player.
- Step #3 is where you add music to your playlist. You can directly use Youtube videos, SoundCloud or upload your own songs to OpenDrive, copy the streaming link to your audio file and use it there.
- Finally configure the player in Step #4 like Auto Play, Shuffle and Loop and copy the code to be used in your Blogger blog.
The main reason for selecting Wikplayer and SCMPlayer is their ability to play the music even when your readers move to different pages of your blog (and the best part is – you are in complete control of this feature).
Step #2: Embed The MP3 Player In Blogger
In Blogger, you have two options:
1. Display the player in all the pages; paste the code in any of your side-bar/footer HTML widgets.
2. Display the player in only some specific pages; paste the code only in those pages or posts (the player will continue to play the songs from your playlist even when your readers move to other pages/posts where the code is not present, once if the songs start playing).
[Blogger -> Add a new post or edit old posts and add the code there]
Best Way To Play Christmas Carols On Your Blog
You can use this widget to play Christmas carols (from Youtube or your own uploaded songs) on your blog and spread cheerfulness all around!