Streaming mp3 Using Google
Update: Google have removed the flash audio player as such it is no longer possible to stream audio using 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 without installing one. This mp3 player is similar to the Gmail player but it also works on non-Google websites. The player has volume controls and it auto-detects the duration of the music file so people know how long the song will last, best of all it has no Google banding whatsoever on the player. Not only will we go discuss the way to stream mp3 using a flash player but also to create a standard complaint code for embedding flash.
I first found an article on the various 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 specification1. Then again, 99% of the flash embedding code uses the <embed> tag, while some re-codes the embedding code like CommonCraft. The <embed> element was created by Netscape as their method of embedding plug-ins and players in web pages. It’s not part of the xhtml specification, and while some browsers other than Netscape support it, it’s not standards-compliant.
Though I didn’t like the embedding code, I liked the Google Reader player and so I searched for more information about the player. I found the long version 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-compliant method of embedding Flash. The answer? Flash Satay. It basically teaches how to transform that ugly code to a standard compliant code with the same capability 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.