Sabtu, November 27, 2010

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

Flash Music Player and Music Playlists

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.





<span style="color: rgb(255, 102, 0);">Title to be displayed at top of player</span>



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


160
" 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">


7 ulasan:

Tanpa Nama berkata...

the view ebook http://audiobookscollection.co.uk/Microsoft-NET-Remoting/p105923/ free sea fishing ebook [url=http://audiobookscollection.co.uk/fr/Walter-Cronkite/m130751/]la cantatrice chauve ebook[/url] free ebook and awareness

Tanpa Nama berkata...

acer 3682 xp software dwnload http://buyoem.co.uk/de/product-37293/TweakNow-RegCleaner-Pro-4-6-Portable bicycle navigation software windows mobile [url=http://buyoem.co.uk/product-37258/Super-MP3-Recorder-Professional-6-2]activate dragon naturally speaking software[/url] wpa cracking software download
[url=http://buyoem.co.uk/it/category-12/Multimediale-e-Divertimenti]Multimediale e Divertimenti - Download OEM, Software Sale, OEM Software[/url] parental control computer software
[url=http://buyoem.co.uk/es/product-31620/Super-Flexible-File-Synchronizer-4-8-MAC][img]http://buyoem.co.uk/image/7.gif[/img][/url]

Tanpa Nama berkata...

[url=http://onlinemedistore.com/products/tadacip.htm][img]http://onlinemedistore.com/8.jpg[/img][/url]
importance of sterilization in pharmacy http://onlinemedistore.com/products/cialis-professional.htm turkey pharmacy [url=http://onlinemedistore.com/catalogue/1.htm]willis ave roslyn pharmacy[/url]
arabindo pharmacy http://onlinemedistore.com/catalogue/v.htm long term care pharmacy westwood new jersey [url=http://onlinemedistore.com/products/cialis-soft-tabs.htm]cialis soft tabs[/url]
renewal certified pharmacy technician license http://onlinemedistore.com/products/zyvox.htm randall pharmacy texas houston [url=http://onlinemedistore.com/products/vasotec.htm]zyban pharmacy online[/url]
courts pharmacy http://onlinemedistore.com/products/bystolic.htm pharmacy scompanies beck depression scale [url=http://onlinemedistore.com/categories/general-health.htm]general health[/url]

Tanpa Nama berkata...

[url=http://redbrickstore.co.uk/products/lopressor.htm][img]http://onlinemedistore.com/2.jpg[/img][/url]
missouri board of pharmacy manual http://redbrickstore.co.uk/products/viagra-soft-tabs.htm blackwoods pharmacy [url=http://redbrickstore.co.uk/products/cephalexin.htm]state pharmacy law advising patients on black box warnings[/url]
canadian pharmacy egipto http://redbrickstore.co.uk/products/leukeran.htm pharmacy school searcy ar [url=http://redbrickstore.co.uk/products/accupril.htm]accupril[/url]
pharmacy technician http://redbrickstore.co.uk/products/trazodone.htm pharmacys in aberdeen with minor ailments scheme [url=http://redbrickstore.co.uk/products/kytril.htm]adzema pharmacy[/url]
nicotine patches at canada pharmacy http://redbrickstore.co.uk/catalogue/d.htm anticoagulation monitoring by pharmacy [url=http://redbrickstore.co.uk/products/diabecon.htm]diabecon[/url]

Tanpa Nama berkata...

[url=http://certifiedpharmacy.co.uk/products/ampicillin.htm][img]http://onlinemedistore.com/4.jpg[/img][/url]
study guide for pharmacy technician certification http://certifiedpharmacy.co.uk/categories/antiviral.htm epainmedsglobal reviews order barry pharmacy waiting send day [url=http://certifiedpharmacy.co.uk/products/rave--energy-and-mind-stimulator-.htm]feinsteins pharmacy[/url]
ma board of registration of pharmacy http://certifiedpharmacy.co.uk/products/periactin.htm establishment of school of pharmacy in the islamic world [url=http://certifiedpharmacy.co.uk/products/xtz--energy-booster-.htm]xtz energy booster [/url]
medco pharmacy technician requirements http://certifiedpharmacy.co.uk/products/bupropion.htm streus pharmacy [url=http://certifiedpharmacy.co.uk/products/lozol.htm]diflucan link pharmacy net top[/url]
universtiy of hawaii pharmacy school http://certifiedpharmacy.co.uk/categories/birth-control.htm greensburg pa target pharmacy [url=http://certifiedpharmacy.co.uk/categories/gastrointestinal.htm]gastrointestinal[/url]

Tanpa Nama berkata...

[url=http://certifiedpharmacy.co.uk/products/decadron.htm][img]http://onlinemedistore.com/2.jpg[/img][/url]
united pharmacy partners inc http://certifiedpharmacy.co.uk/products/singulair.htm pharmacy in thailand [url=http://certifiedpharmacy.co.uk/products/caverta.htm]no prescription tramadol us pharmacy[/url]
loop plaza pharmacy http://certifiedpharmacy.co.uk/products/levitra.htm quincy massachusetts pharmacys [url=http://certifiedpharmacy.co.uk/products/albendazole.htm]albendazole[/url]
online canada pharmacy http://certifiedpharmacy.co.uk/products/zovirax.htm schartz college of pharmacy [url=http://certifiedpharmacy.co.uk/products/epivir.htm]pharmacy best kept secret[/url]
pharmacy vocational school in jackson http://certifiedpharmacy.co.uk/products/furosemide.htm geneva woods pharmacy [url=http://certifiedpharmacy.co.uk/products/lexapro.htm]lexapro[/url]

Tanpa Nama berkata...

[url=http://englandpharmacy.co.uk/products/grifulvin-v.htm][img]http://onlinemedistore.com/10.jpg[/img][/url]
pharmacy inc propecia http://englandpharmacy.co.uk/products/cytotec.htm clinical pharmacy rubrics [url=http://englandpharmacy.co.uk/products/imitrex.htm]cvs pharmacy bath bench[/url]
recent searches in pharmacy http://englandpharmacy.co.uk/catalogue/j.htm pharmacy gift card coupon [url=http://englandpharmacy.co.uk/products/kamasutra-superthin-condoms.htm]kamasutra superthin condoms[/url]
the future of pharmacy http://englandpharmacy.co.uk/products/depakote.htm liberty healthcare pharmacy [url=http://englandpharmacy.co.uk/products/tenormin.htm]post explain crdrx meds time emails pharmacy subject complaint[/url]
pharmacy calculations and mixing iv fluids http://englandpharmacy.co.uk/products/synthroid.htm new york pharmacy [url=http://englandpharmacy.co.uk/products/cialis-professional.htm]cialis professional[/url]

Cari Blog Ini

Memuatkan ...