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&amp;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.

Filed Under Tech Tips
Tagged:

Podcast Answer Man?
Cliff Ravenscraft is the founder of the Generally Speaking Production Network and the host & producer of many podcasts found at www.gspn.tv. Podcast Answer Man is the podcast consulting & audio equipment sales side of Cliff's podcasting career. If you are interested in speaking to Cliff about consulting or equipment sales, you can email Cliff@Ravenscraft.org or call him at 859-757-1399.

Comments

  • pumpkinheadz
    i use it on my site it looks better in black but it seems to be the only two choices
  • @George, they can also use the "embed episode" option we have on Blubrry.com. It involves manual insertion on a regular basis, but depending on the technical level of the person responsible for it, it would work. As cliff suggests, the wimpy player is also a nice option, but won't to my knowledge it won't be posting inside the post, just on a page in a static position.
  • @George, Here's an answer for you...
    http://www.wimpyplayer.com/products/wimpy_mp3.html

    I hope this works out for you!

    Cliff
  • I've recently launched a weekly podcast on my website which is wordpress powered. I am using the blubrry audio player but I would also like to get my podcast on WomenTalkSports.com (they already get my RSS feeds) BUT they are not a wordpress site so my blubrry player doesn't work on that site. How can I provide a Flash player version of my feed for sites who want my podcast but aren't wordpress sites?

    Any help you can give me would be greatly appreciated as I haven't found anybody who can answer this question.
  • Ed,

    Sounds like there would be a bit more of one on one time to figure out exactly what you are trying to do. I'll contact you via email!
  • Thanks a heap Cliff! For a long time been meaning to add this feature to my episodes posted at Libsyn. I've decided on the Google player but am wondering how or where to embed the code so as to affect all 8 episodes on each page! Any suggestions.?
  • Thanks for the article Cliff! I'll be watching for an update on your new recommendations. One thing also have you thought about using the "Subscribe to comments" plugin? That way I can subscribe and each time there is a comment I will get an e-mail.
  • Jeff, Yes, you are correct. I hope to eventually come back and update this post. Some of the players are not the best options these days.

    Thanks for the comment on the site!

    Cliff
  • With a little bit of work, you can use the player that's part of the Word Press plugin. It is called 1pixelout. It does take a bit of work, but I know that uses of the Drupal CMS have used just the flash player.

    The following link has a link to page that explains how to use the player on non-wordpress sites.
    http://www.1pixelout.net/code/audio-player-word...

    For those concerned with code disappearing, it might be worth downloading the plugin and using the flash files contained there in on the webpages, since you will host those files on your webserver.
  • Tom
    HELP!!!!!

    Is there any way of setting any of these embedded players with a LIVE STREAM? I have a website KED281,com and I have an ASX, XSPF and M3U file set up. But I can't st any of these to work with an embedded flash player.
    If you feel like trying the files are at:
    KED281.com/281.asx
    KED281.com/281.m3u
    KED281.com/281.xspf
    If you it working let me know?????????

    Tom
  • Check this link out and it should answer your question:
    http://gspn.tv/forum/index.php?topic=2134.0
  • DJsikou
    that was nyc, but hey, is there any way to embed mp3 files in your forum posts
  • Thanks Cliff! This is extremely helpful as I've been thinking about getting a flash player for some time now for my music blogs!
  • Pam Pallidin
    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.
  • 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.
  • Don Sceifers
    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.
  • 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!
  • 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.
  • 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.
  • 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
blog comments powered by Disqus