Embed MP3 Files Into Your Website - featuring Mr Bojangles!

Communication with your audience is always key, and this little widget should help.

Posted by Paul Whitrow, 13th July, 2008 | Permalink | 4 Comments

This is so useful I thought I would:
a. make use of it myself
b. post and cite it in an article

Here is the original article by Alex Chitu

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>

The above code should all be on one line, with spaces separating the attributes.

You just have to replace [MP3 file address] with the actual address of the mp3 file you are wanting to use.

Here is an example (a version of Mr Bojangles I recorded back in January), styled up a little, for you to see it working:

There are some extended options too:

Auto start, Loop song, Control volume example:
autostart="true" loop="true" volume="50%"

Change grey to pink version of player by changing audio_player_standard_gray.swf to audio_player_standard_pink.swf

Posted on Sunday 13th July, 2008 at 12:05 pm by Paul Whitrow, and filed under Flash