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.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

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.

Technorati tags: | | | | |

14 Comments on “Tutorial: An MP3 audio player for any Web page

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

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

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

  4. 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!

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

  6. 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?

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

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

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

  10. 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?

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

    You do need WP for Martin’s plug-in.

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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.