Flash Music Player and Music Playlists

In 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.

<?xml version="1.0" encoding="UTF-8"?> <playlist version="0" xmlns = "http://xspf.org/ns/0/"> <!-- Insert the information into the colored portions. If there is none, just leave the field blank. Refer to http://tips-for-new-bloggers.blogspot.com/ for updates to the code. --> <title>Title to be displayed at top of player</title> <trackList> <track> <location>http://yourname.googlepages.com/song1.mp3</location> <image>http://yourname.googlepages.com/song1.jpg</image> <annotation>Song1 display text</annotation> </track> <track> <location>http://yourname.googlepages.com/song2.mp3</location> <image>http://yourname.googlepages.com/song2.jpg</image> <annotation>Song2 display text</annotation> </track> <track> <location>http://yourname.googlepages.com/song3.mp3</location> <image>http://yourname.googlepages.com/song3.jpg</image> <annotation>Song3 display text</annotation> </track> <track> <location>http://yourname.googlepages.com/song4.mp3</location> <image>http://yourname.googlepages.com/song4.jpg</image> <annotation>Song4 display text</annotation> </track> <track> <location>http://yourname.googlepages.com/song5.mp3</location> <image>http://yourname.googlepages.com/song5.jpg</image> <annotation>Song5 display text</annotation> </track> </trackList> </playlist>

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:-

<!-- Change the colored values. Refer to http://tips-for-new-bloggers.blogspot.com/ for updates to the code. --> <object codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=" type="application/x-shockwave-flash" height="160" standby="Player is loading ..." width="400" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"> <param name="_cx" value="10583"> <param name="_cy" value="4445"> <param name="FlashVars" value=""> <param name="Movie" value="http://yourname.googlepages.com/xspf_player.swf?playlist_url=http://yourname.googlepages.com/myplaylist.xspf"> <param name="Src" value="http://yourname.googlepages.com/xspf_player.swf?playlist_url=http://yourname.googlepages.com/myplaylist.xspf"> <param name="WMode" value="Window"> <param name="Play" value="0"> <param name="Loop" value="-1"> <param name="Quality" value="High"> <param name="SAlign" value="LT"> <param name="Menu" value="-1"> <param name="Base" value=""> <param name="AllowScriptAccess" value="sameDomain"> <param name="Scale" value="NoScale"> <param name="DeviceFont" value="0"> <param name="EmbedMovie" value="0"> <param name="BGColor" value="E2E2E2"> <param name="SWRemote" value=""> <param name="MovieData" value=""> <param name="SeamlessTabbing" value="1"> <param name="Profile" value="0"> <param name="ProfileAddress" value=""> <param name="ProfilePort" value="0"> <param name="AllowNetworking" value="all"> <param name="AllowFullScreen" value="false"> <embed src="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"> </embed> </object>

The variables that you should remember to change are:-

1. The domain or location where the player application was uploaded (shown in purple).

2. The location of the music playlist file (shown in red).

3. The background color code of the music player (shown in blue). You have limited choices here because the gray panel colors are fixed. For a list of color codes, refer to our Hexadecimal Color Code Chart.

4. The width and height of the music player interface (shown in green).

Once you are done, save the widget and refresh the Blog. You should now see a MP3 Music Player that has a music playlist of your favorite songs for readers to view, select and listen to.

Have fun toying with the new music player widget!

© Tips for New Bloggers