Tutorial: An MP3 audio player for any Web page

I’ve been working on setting up ways to help journalism students and educators learn to gather and edit audio. One of the things people need is an easy-to-use player that they can incorporate into a blog entry or Web page.

To learn how to use this player on your own, please see this tutorial. I didn’t create the player (Martin Laine did), but I have his permission to publish the tutorial (which I wrote).

Update: If you are using WordPress, ignore my tutorial and go straight to Martin’s page. My tutorial is only for non-WordPress sites!

You should see the player above. If you do not see it, then you don’t have the Flash player installed. (More than 90 percent of all Internet users do have it.)

If you are using Internet Explorer, you will probably need to click the player twice to make it play. (All other Web browsers will let you click once.)

The MP3 audio file used here is 1 min. 38 sec. It is 22.05 kHz, 16 bits, mono (one channel). Data rate: 56 Kbps. File size: 676 KB.

I’m having a bit of an allergy today, so please excuse the nasal tone. I recorded the music yesterday at our local Hoggetowne Medieval Faire using an Electro-Voice 635N/D-B microphone and the M-Audio MicroTrack recorder. I mixed the two audio files using GarageBand — it was the very first time I had opened the program. (I am more familiar with Adobe Audition, on Windows, for editing audio files.)

There was also an airplane flying overhead at the start of the music, so you can experience all sorts of sound in this little file.

The player is the thing, though. I just wanted to give you a long-enough audio file so you could see how nice Martin’s player is.

This entry was posted on Sunday, January 28, 2007, at 5:22 pm and is filed under audio, journalism, online, teaching, tools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

13 responses to “Tutorial: An MP3 audio player for any Web page”

Vegard writes:

Dear Mindy,

Thank you very much for posting this one about a Flash player for sound files. I’ve been wondering how to make mp3 files more easily available for audience who doesn’t want to download an audio file, but who’d double click and listen to a file if it was available instantly without any extra download steps. Brilliant.
January 29, 2007 at 12:11 am
Mindy McAdams writes:

This is the way I prefer to listen to audio online — right away, with no downloading!
January 29, 2007 at 12:45 am
Melissa Worden writes:

Thank you, thank you, thank you! This is sooo great.
January 29, 2007 at 1:09 am
Patrick writes:

If you are using Internet Explorer, you will probably need to click the player twice to make it play. (All other Web browsers will let you click once.)

It might be helpful to add a reference to a Flash-detection script such as SWFObject. Not only will this address the needs of IE users, of which there are many, but it also allows for some replacement text for those that might not have Flash, or can’t hear what’s being played.

Otherwise, this is a great tutorial!
January 29, 2007 at 1:27 pm
Mindy McAdams writes:

I’m going to write a new SWFObject tutorial soon. I had one for its predecessor, FlashObject, and then the guy had to change the name!

You are right, it is the best practice for all Flash content. But I didn’t want to confuse the people who are not used to using code.
January 29, 2007 at 1:35 pm
Danny Sanchez writes:

Sweet!
January 29, 2007 at 3:27 pm
Palavra Alada writes:

perfect! thanks
January 29, 2007 at 9:51 pm
wjyen writes:

Dear Mindy, Thnx for this tutorial ! worked great, im just wondering, is it possible to make the player auto play when i open the blog?
February 2, 2007 at 3:07 pm
Mindy McAdams writes:

Wjyen, yes, just read the second page of the tutorial.
February 2, 2007 at 3:10 pm
Anonymous writes:

Is there a way to make the mp3 file hidden?

Right now, I think, an end user can download the mp3 file and save it.

Animesh
February 20, 2007 at 6:13 am
Mindy McAdams writes:

Animesh, there’s no way I know of to hide it with this player.

If you build your own player, you can embed the name of the MP3 file in the ActionScript, and not many people know how to get inside the SWF to see that.
February 21, 2007 at 2:37 pm
Josh writes:

Very interesting way of setting an mp3 player on a blog. I am new to blogging and I understand i need wordrpess for this right?
August 13, 2008 at 11:39 am
Mindy writes:

@Josh: No, you do not need WordPress for the version in my tutorial.

You do need WP for Martin’s plug-in.
August 13, 2008 at 11:43 am