Welcome to the digital home of Keefe Tang

This is where I keep my opinions & things I refer all in one place. If you have any questions feel free to drop me a line, if you don’t, how about subscribing to my feed.

Streaming mp3 Using Google

Update: Google have removed the flash au­dio player as such it is no longer pos­sible to stream au­dio us­ing Google’s Flash player.

I know there are many free flash players that plays mp3, this is just to show that we can have a flash player with­out in­stalling one. This mp3 player is similar to the Gmail player but it also works on non-Google websites. The player has vol­ume con­trols and it auto-de­tects the duration of the mu­sic file so people know how long the song will last, best of all it has no Google banding whatsoev­er on the player. Not only will we go discuss the way to stream mp3 us­ing a flash player but also to cre­ate a standard complaint code for embedding flash.

I first found an article on the var­ious flash player that can be used to stream mp3 and embed them in your website including the Google player. As nice as those players are, I refuse to use them because they uses the <embed> tag which is not a valid tag of the xhtml spec­ification1. Then again, 99% of the flash embedding code uses the <embed> tag, while some re-codes the embedding code like CommonCraft. The <embed> el­e­ment was cre­ated by Netscape as their method of embedding plug-ins and players in web pages. It’s not part of the xhtml spec­ification, and while some browsers oth­er than Netscape support it, it’s not standards-compli­ant.

Though I didn’t like the embedding code, I liked the Google Read­er player and so I searched for more information about the player. I found the long ver­sion of embedding the player:

 
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab"
width="500px" height="27px" align="middle">
<param name="allowScriptAccess" value="always" /> <param name="movie" value="http://www.google.com/reader/ui/3247397568-audio-player.swf" /> <param name="FlashVars" value="audioUrl=URL" /> <param name="quality" value="best" /> <param name="bgcolor" value="#EEEEEE" /> <param name="scale" value="noScale" /> <param name="wmode" value="opaque" /> <param name="salign" value="TL" /> <embed id="Player" scale="noScale" salign="TL" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=URL" wmode="opaque" quality="best" bgcolor="#EEEEEE" width="500px" height="27px" name="Player" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/
go/getflashplayer"
/>
</object>

Again it uses the <embed> code, and so I needed a way to make a leaner, standards-compli­ant method of embedding Flash. The answer? Flash Sa­tay. It ba­sically teaches how to transform that ugly code to a standard compli­ant code with the same capa­bility thus giving us this2.

 
  <object type="application/x-shockwave-flash" width="500px" height="27px"> 
    <param name="allowScriptAccess" value="always" /> 
    <param name="movie" value="http://www.google.com/reader/ui/3247397568-audio-player.swf" /> 
    <param name="FlashVars" value="audioUrl=URL" /> 
    <param name="quality" value="best" /> 
    <param name="wmode" value="opaque" /> 
  </object> 

All you need to do is replace url with the url to your mp3 file and you’re set. The code is much neater and it performs just the same.

  1. I am a sucker for a clean, valid code
  2. I removed some of the attributes I don’t want, but you can still use them if you want