Music

n our earlier article, Add Music to Blogspot Blog, we talked about how music can be played in the background of the blog or through a hyperlink or music console player. Readers had requested for an option to play more than one song via a playlist. We have been looking at cross-browser music players that allow us to display a music playlist of selected musical pieces for Blog readers to listen to. Here, we shall discuss what we believe is a good music player that can be played in both Firefox and Internet Explorer. The following are the instructions on how to embed the music player into the Blogger blog.

Overview

On the internet, there are several sites that offer music player widgets and gadgets (including Google Gadgets) that can be added to your blogs. Most of them have easy-to-navigate user interface, and sites like Sonific even offer free licensed music tracks that can be inserted into the widget. These are commercial sites and needless to say, in order to sustain their operations, there will be advertisements and sales promotions. Furthermore, the available songs that they have may not be the latest hits or to your liking.

If you would like more control over the choice of songs for your blog, follow the steps in this tutorial to upload the songs that you like and add a music player code into the Blogger blog. The music player plays MP3 songs which have smaller file size than .wav files.

XML Shareable Playlist Format

You may have come across file extensions .m3u and .asx. These are playlist files and clicking them will play the music or video files stored in the playlists. The new XML Shareable Playlist Format (XSPF) (pronounced 'spiff') is another playlist format for digital media. Although it is still in the early stages of being recognized as an Internet standard, many browsers are able to execute such file formats.

XSPF MP3 Music Player

The site that explains quite fully how a music player application using this XSPF playlist format works is Sourceforge.net. In that article by Fabricio Zuardi, you can find different player styles i.e., a Slim version that displays the basic controls and current music track; an Extended version that shows the controls, list of songs, album cover and music track; and a Button version that is simply a start and stop button. There is also an option for inclusion of the player into the Mozilla Firefox sidebar. What this does is to give readers an option to go to their Firefox Bookmarks and click “My Music Player” link to open the music player in their browser sidebar and listen to the songs while surfing other sites.

Extended Music Player



We shall focus on this extended music player version (demo at the bottom of this blog) which essentially displays a scrollable list of songs, have album pictures, and enable user control over the volume and play mode. First, click this link to download the music player files. Unzip the folder and save it. The files are free from virus and spam ware but you can of course scan them before downloading.

Next, upload all the player application files contained within the unzipped folder onto a web server. For our illustration, we have uploaded our files onto the free server at Google Page Creator. You can also refer to our article on Manage Blogger Image Storage Space for a list of other free file hosting services. Choose one that allows uploading of all types of files as well as hotlinking to those files. To test whether they allow hotlinking, upload a music file and if you type that music file url into an internet browser, you should be listening to that music instead of being brought to a page with other contents. If you have uploaded the application onto Google Pages, the player file will be located at http://yourname.googlepages.com/xspf_player.swf [Do note that Google Pages has a limit of 100MB in storage space.]

Upload Music Files

The aim is to allow readers to listen to your music pieces. Of course, we have to assume you already have the music files either in a music CD or computer. Convert them to MP3 formats. If you need a free music converter, look for one at Download.com. Upload these MP3 files onto the free server.

Create XSPF Music Playlist

After you have uploaded the songs, it is time to create the Playlist file. Open the application Microsoft Notepad. For most Windows users, the link should be at the Start Programs -> Accessories folder. Copy and paste the following into the Notepad.

http://yourname.googlepages.com/song1.mp3 http://yourname.googlepages.com/song1.jpg Song1 display text http://yourname.googlepages.com/song2.mp3 http://yourname.googlepages.com/song2.jpg Song2 display text http://yourname.googlepages.com/song3.mp3 http://yourname.googlepages.com/song3.jpg Song3 display text http://yourname.googlepages.com/song4.mp3 http://yourname.googlepages.com/song4.jpg Song4 display text http://yourname.googlepages.com/song5.mp3 http://yourname.googlepages.com/song5.jpg Song5 display text

Insert into the colored portions the music URLs and the corresponding titles or text that you want to display. If there are no album covers or images that you want to upload, leave the fields blank. You can add more songs to the list. Copy and repeat the block of code (in italics).

After you have inserted all the information in Microsoft Notepad, click “Save As”. Under the drop down option “Save as type”, choose “All Files”. Assign a file name and end it with .xspf extension. For instance, if you decide to call it myplaylist, then enter the “File name” as “myplaylist.xspf”. Save the file and similarly, upload this file onto the free server. The playlist file will have a URL like this:- http://yourname.googlepages.com/myplaylist.xspf

Insert Music Player into Blog

The final step is to embed the music player onto the Blogger blog. Decide where you want to place the music player console. Then go to Template -> Page Elements -> Add a Page Element and select “HTML/JavaScript”. If you want the music console in your post, when you are at the Post Editor, change to the “HTML” mode rather than “Compose” mode.

Copy and paste the following code:-

" standby="Player is loading ..." width="400" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"> http://yourname.googlepages.com/xspf_player.swf?playlist_url=http://yourname.googlepages.com/myplaylist.xspf"> http://yourname.googlepages.com/xspf_player.swf?playlist_url=http://yourname.googlepages.com/myplaylist.xspf"> E2E2E2"> http://yourname.googlepages.com/xspf_player.swf?playlist_url=http://yourname.googlepages.com/myplaylist.xspf" quality="high" bgcolor="#E2E2E2" name="xspf_player" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="center" height="160" width="400">