You have an MP3 file (a podcast, a song of your band, a lecture) and you want to share it with the visitors of your site. You can just put a link to the MP3 and let people download it or you can include it as an object and let the browser play it with a plug-in like QuickTime (and most of the times also crash the browser). Most people want to preview the audio and not wait until it downloads completely. You can play a partial MP3 file in audio player, but many people aren’t aware of that.

But there’s another away: a Flash player that allows you to pause and rewind the MP3. It’s like an audio version of Google Video or YouTube, with the difference that the file is hosted on your server (or on another server). While there are many solutions based on Flash, this is the one I like the most. It’s a modified version of Odeo player, that’s used to play podcasts on odeo.com:

<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=[MP3 file address]” pluginspage=”http://www.macromedia.com/go/getflashplayer”> </embed>

Learn how to embed MP3 files (like songs, music or audio podcasts) in web pages so that visitors can listen to the audio in the browser via the Flash player without requiring Quicktime or Windows media player.

Embed MP3 Files with Flash Players

Here we explore Flash based MP3 players from Google and Yahoo! that are small in size and also easy to embed in web pages.

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 (inactive)

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.

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 (inactive)

Odeo offers a pretty impressive MP3 player 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.