| got-za.blogspot.com

Best Way To Add Music Files To Blogger Blogs

Posted: 09 Oct 2016 12:28 AM PDT

Live demo of the music player is here.

There are several occasions when you would like to add music to your blogs. Some bloggers need to do this all the time who review songs, albums, create their own tracks and share it with their audience. While 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.

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:

1. Create a customized player with the playlist of songs you own or from sources like Youtube and SoundCloud
2. Embed the player in your blog

How and Where to Upload Songs

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:

1. Cincopa
2. Wikplayer
3. SCMPlayer

Although Cincopa is quite famous and reliable, but customization of 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).

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.
[Blogger -> Layout -> Add a Gadget -> HTML/Javascript type and paste the code in it]

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]