How to Embed MP3 Audio Files In Web Pages With Google or Yahoo! Flash Player
Question: How do you embed an MP3 file (like a podcast, song or background music) into a web page or an RSS feed so that visitors can listen to the audio in the browser itself without requiring an external player like QuickTime or Windows Media Player.
Answer: We earlier recommended the Google MP3 Player for embedding MP3 songs and audio podcasts in web pages but for some reason, the Google Flash player has stopped working on external websites other than listening to voicemail messages on Gmail.com.
So here we explore some new Flash MP3 players from Google and Yahoo! that are again light-weight, easy to implement and extremely efficient.
1. Google Reader MP3 Player
Google Reader has an inbuilt MP3 player that is pretty much the same as Gmail player but it also works on non-Google websites. This player has volume controls, no Google branding and it auto-detects the duration of the music file so your readers know how long the song will last. Here’s a live example followed by the HTML embed code:
To use this MP3 player on your website or blog, copy-paste the following code and replace the MP3_FILE_URL with the link to your MP3 file.
2. Yahoo! MP3 Player
If you think normal is boring, check this out. Yahoo! offer a code generator (Easy Listener) to help you create a Flash based MP3 player that matches your website color theme and layout. See example:
Though this Easy Listener MP3 player requires you to pass the address of the web page that contains the MP3 file(s), you can directly pass the MP3 link and it will work just fine. Supports auto play and you can decide where the meta data associated with the MP3 file should be displayed.
3. Yahoo! Media Player
If you maintain an MP3 blog or run a podcast and regularly link to MP3 files, it makes little sense to embed a separate Flash player with every MP3 file. I would therefore recommend using the Yahoo! Media Player that auto-detects links to MP3 files in your web pages and creates an embedded player for each link.
All you have to do is insert the following link in your blog template and all MP3 hyperlinks will be converted into inline MP3 players. This also has the shuffle feature and visitors can easily skip to any song in the playlist. Excellent stuff.
4. Odeo MP3 Player
Odeo offers a pretty impressive MP3 player (see example) that works perfect in web pages as well as RSS readers but a small issue is that Odeo Player requires you to type the exact duration of the song in the embed code. You can skip this step but then the progress bar won’t reflect the true status when you play the song. And there are no volume controls.
To use Odeo MP3 player in your website, add the following code replacing MP3_FILE_URL and DURATION with relevant values.
Summary: With so many choices, how do you pick the right MP3 player for your website ?
As a minimalist, I prefer the Google Reader MP3 player since it offers volume control and minimal branding. But if you are regularly linking to MP3 files, this will prove cumbersome and I suggest integrated the Yahoo! Media Player on your website.
Related: How to Trim MP3 Songs
Subscribe in a reader
Hi Amit
Could you kindly confirm is it legal to use the code from their site.
Is it possible to include multiple links to create a playlist? I haven’t had the chance to test this myself, so I thought I’d ask.
You could download the players to your own server, so you’re not dependent on others. For example, download and save http://www.google.com/reader/ui/3247397568-audio-player.swf to your server and then simply change the URL for it to the location on your server. Dunno if that has any legal implications, though.
Hi,
I pasted the code and music URL from my Google Groups. It appears in my blog(Blogger) but once I press Play button it shows the 0:00 song length and no sound at all. I tried the same URL and plays in my Windows Media Player without any problem. Did I miss anything here? Please help. Thanks.
FlowPlayer (http://www.flowplayer.org) is another fullblown media player (video: flv, audio:mp3, that is) for the web. I am not sure if Yahoo lets you download the media player and lets you program against it! Esp, if you want to play it in offline mode, you need a player which you can run from your own machine and program it to your hearts content. I have found Flowplayer to be very useful.
Hi there,
I tried he google reader. I get NaN for the song length and no sound.
Hi,
How could I make the music:
1. continuously repeat
2. hide from view and
3. autoplay
Thanks.
Hi,
for the life of me, any flash player I use won’t buffer form my site. Could it be my provider? Embeddes quicktime goes wrong in any browser on Mac and PC, also plays for only a couple of seconds, Google reader plays fine on PC, not on Mac/Safari, that is to say: a file from my server. From yours it’s just fine. I’ve looked for hours on the web, but cannot find solutions or even hints.
Thanks!
Paul Delcour
To Paul Delcour:
I have the same problem from my home connection, and never from anywhere else every once in a while.
The easy fix is to shut down your computer and reboot. Clearing the browser cache works sometimes, but not always. Shutting down and rebooting always works. Hope that helps until a real tech guy shows up.
How i add a play list to Google MP3 Player?
building site including podcasts/ downloads simultaneously playing on MAC PROBLEM IS on PC downloads entire file before ever begins to play Want to know how to fix so PCs will simultaneously begin playing while downloading???
How to Embed MP3 Audio Files In forum sites With Google or Yahoo! Flash Player