Teaching Examples

Tutorial: An MP3 audio player for any Web page
January 28, 2007, 5:22 pm
Filed under: audio, journalism, online, teaching, tools

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).

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.

Technorati tags: | | | | |


11 Comments so far
Leave a comment

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.

Comment by Vegard

This is the way I prefer to listen to audio online — right away, with no downloading!

Comment by Mindy McAdams

Thank you, thank you, thank you! This is sooo great.

Comment by Melissa Worden

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!

Comment by Patrick

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.

Comment by Mindy McAdams


Comment by Danny Sanchez

perfect! 🙂 thanks

Comment by Palavra Alada

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?

Comment by wjyen

Wjyen, yes, just read the second page of the tutorial.

Comment by Mindy McAdams

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.


Comment by Anonymous

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.

Comment by Mindy McAdams

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: