How To Embed MP3 Flash Players On Regular HTML Sites
October 3, 2008 by Cliff Ravenscraft
One of the most common questions I’m asked as a podcast consultant is how can I get flash audio player for my podcast so that people can listen to my podcast without having to leave my website?
Of course, if they have WordPress, I immediately tell them to install the Audio Player Plugin for WordPress. However, for those who use another method of creating a website for your podcast, there is still hope. I’d like to share three options for posting a flash player for your podcast episodes on your standard html site.
Update: Someone left a comment on this post that makes a valid point. If you should choose to use this method for your site on individual posts, please understand that you are relying on the fact that these companies will still exist moving forward. If for example ODEO were to go out of business, it is unlikely that their flash player will continue to be available. Please just keep this in mind.
The ODEO Player
Odeo.com is part search engine, part media directory, and part social network. I played around with Odeo when I first got into podcasting but really haven’t even looked at their site more than a handful of times in the past two years. However in my search for embeddable flash audio players, I the ODEO Player popped up.
The benefit of the Odeo player is that it is somewhat attractive when compared against other options. However the drawbacks that I see are that you can’t change the color of the pink play button and there ODEO is branded on your site. If someone clicks on the “ODEO” logo on the player, they are taken OFF YOUR SITE! I could not find an option to change it to open a new window or anything. Also, this player lacks an adjustment option for volume.
CODE FOR ODEO FLASH PLAYER:
<embed src= "http://www.odeo.com/flash/audio_player_standard_gray.swf" quality="high" width="300" height="52" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" flashvars= "valid_sample_rate=true&external_url=LINK-TO-YOUR-MP3" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed>
The Google Flash Player:
Next we have the Google Flash Player. The benefit of the google player is that there is no branding whatsoever. Also, the code allows for you to change the color of the background on your player to match your site. It seems odd to have the “<<" and ">>” when posting a single mp3 file. However, these buttons offer the ability to jump forward and backward in the file you are listening to. The only drawback I can see with this player is that, like many other google products, is pretty “simple looking” and just on the edge of being ugly. It’s quite functional and it does what it’s supposed to do.
CODE FOR THE GOOGLE FLASH PLAYER
<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=LINK-TO-YOUR-MP3" width="400" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded" /></embed>
The Yahoo Flash Player
The Yahoo Flash Player is another option. Like the ODEO Player, there is Yahoo branding on the player with a small Yahoo logo. However, the nice thing is that it is an image only, it does not have a hyperlink that takes your listeners off your site. This is good. Like the Google player, you can see that are “<<" and ">>” buttons. However, on the Yahoo player, these buttons are specifically designed for next track and previous track. Truth is that this player can be used to play a single mp3 file or can be set to read data from any podcast rss feed. While I’ve not tried it, there seems to be an option to change the skin color which may be useful in helping to make the player fit within your color scheme.
CODE FOR THE YAHOO FLASH PLAYER
<embed src="http://webjay.org/flash/dark_player" width="400" height="40" wmode="transparent" flashVars="playlist_url=LINK-TO-YOUR-MP3-OR-RSS-FEED&skin_color_1=-145,-89,-4,5&skin_color_2=-141,20,0,0" type="application/x-shockwave-flash" /></embed>
Do you have any additional flash players you would like to share? Please feel free to leave your thoughts in the comments section.
Do you find this sort of information useful? Why not help support this sort of content by becoming a gspn.tv Plus Member.
Thanx, Cliff. A great quick review.
So, which one did you decide to use based on your original Twitter question?
Peace to your weekend!
-BarbaraKB
I don’t use any of these three myself. I use WordPress on all my pages and so I use the Plugin mentioned.
I did this as research for consulting clients. I leave the decision up to them based upon the benefits and drawbacks mentioned.
The <> can also be for chapter markers. If you have a long recording with several topics, you can place a marker at each new topic. That way, if someone can’t listen to a 30 minute mp3 all at once, or they aren’t interested in that topic, they just click to the next chapter.
Thank you, thank you, thank you! This is so great Cliff! I decided to go with the Google one myself. I really didn’t think it could possibly be as easy as it seemed, but I was wrong. I’m adding the 6 Girls Night In Radio ones right now but the *gulp* 350 Sims 2 Challenges podcasts will take awhile. It’s easy enough though that I think it will be worth it for the ease of use of the listeners. Thanks again! This is awesome!
http://ericzhang.com/mp3.php simple play/stop player
odeo has a darker option. I found searching the web: If you don’t like pink, there is a darker version. You just have to replace _gray with _black in the second line of the code.
http://www.varal.org/media/niftyplayer/ simple player
these are a few of the different ones I’ve seen while searching.
Found a generator for the Yahoo player called Easylistener. Has several options and styles to chose from.
http://next.yahoo.net/archives/32/easylistener
“Easylistener is a Flash music player which can literally play any page on the web. Simply point it at your favorite music blog, RSS feed or playlist document and it will crawl that URL and start playing back any mp3s it finds.”
Also I think the example player is showing the last generated, so be ready for an autoplay.
Cliff, thanks for posting this. Very helpful.
Careful since they have a bunch of lawsuits against Odeo management. Your embedded MP3’s will not play once they go flatline.
Post was helpful though.
[...] I mention my blog post that describes How To Embed MP3 Flash Players On Regular HTML Sites. [...]
Thanks Cliff! This is extremely helpful as I’ve been thinking about getting a flash player for some time now for my music blogs!