Integrating MP3 Audio Messages Into Your Website

The Web is often touted as the world's greatest bazaar, opening up a potential marketplace of billions to even the smallest businesses. Of course, with thousands of new web sites coming online every day, it's increasingly crucial to make a lasting impression on visitors that hopefully keeps them engaged and coming back on a regular basis. While you could attempt to wow visitors with some whiz-bang Flash or dazzling graphics, sometimes simply attempting to establish a personal connection with your visitors by offering regular insights into topics of interest to them can be a great way to establish a rapport.

Of course, this is the sort of strategy that has been employed through blogs for years, and more recently through podcast feeds. However, if your only intent is to record and update a single message then forcing the visitor to go through the trouble of subscribing to the feed doesn't make much sense. At the same time, you definitely don't want to force the message on the reader by automatically playing it upon arrival; this isn't 1995 after all, and status bar scrolling, flashing text, and uninvited audio messages are so passé! Further, the reader should at least be able to both start and stop the message at his discretion.

In this tutorial I'll not only show you how to give your users control over the playback of your tastefully embedded audio messages, but introduce a great open source solution for recording your MP3 files!

Recording Your Audio Message

You might be under the impression audio recording requires a special skill set and expensive software; not so. A great cross-platform open source application named Audacity and a cheap microphone (I purchased mine from Best Buy for roughly $15) is all you need. Audacity is capable of recording and editing Ogg Vorbis, MP3, and WAV sound files. All you need to do is install it along with the LAME encoder library (for exporting your audio in MP3 format), plug in your microphone, and start recording!

Figure 1. Recording a File with Audacity

Audacity has built-in playback, so once you've completed recording be sure to listen to your message a few times. If something is awry, just press the record button anew and start over. Once the recording is ready, navigate to File -> Export as MP3... and choose a name and desired location.

Tips for recording an effective message:

• Keep it brief: The point of this particular approach is to make an immediate connection with the reader, quickly seeding a message into his head before he loses interest and navigates to another page on the site. Therefore keep your message fairly brief, perhaps 30 seconds at most.
• Stay on topic: While I've no doubt your visitors would love to know more about the software bug you'd uncovered over the weekend, or gain valuable insight into your take on current world events, you'll probably better serve them by mentioning new website features or talking about a new product promotion. Ultimately, you need to determine what brief message is ultimately going to result in a sale or a returning visitor.
• Speak clearly: This is likely the only time a visitor will ever hear your voice, therefore fumbling your words or mumbling isn't exactly going to make a great impression. Audacity makes it exceedingly easy to simply record and playback your message until you iron all of the kinks out; take full advantage of it.

Embedding the Audio Message

As the goal is to grant the visitor control over both playing and stopping the message, you'll need to integrate some sort of user interface into the appropriate web page (I suggest the home page) in order to tempt the maximum number of visitors). There are quite a few solutions out there, however I've found Martin Laine's Audio Player Wordpress plugin to be particularly flexible. Licensed under the GPL, although Martin intended it for use within the Wordpress blogging platform, you can easily adopt it for use within any web page.

Figure 2. Audio Player at Rest

Figure 3. Playing an MP3 with Audio Player

To begin using Audio Player, download it from Martin's website and unzip it to an appropriate location within your web site's directory. Only two files from this zip file are necessary, including audio-player.js and player.swf, therefore feel free to dispose of the other files.

Next, you need to embed the JavaScript and SWF file into your web page. This is done with the following code (keep in mind have formatted this code for readability. You cannot insert hard newlines into the code, otherwise errors will occur! Therefore be sure to remove the newlines before attempting to execute the code):

<script language="JavaScript" src="audio-player.js"></script>
<object type="application/x-shockwave-flash" 
            data="player.swf" 
            id="audioplayer1" height="24" width="290">
<param name="movie" value="player.swf">
<param name="FlashVars" value="playerID=1&amp;
bg=0xf8f8f8&amp;
leftbg=0xeeeeee&amp;
lefticon=0x666666&amp;
rightbg=0xcccccc&amp;
rightbghover=0x999999&amp;
righticon=0x666666&amp;
righticonhover=0xffffff&amp;
text=0x666666&amp;
slider=0x666666&amp;
track=0xFFFFFF&amp;
border=0x666666&amp;
loader=0x9FFFB8&amp;
loop=no&amp;
autostart=no&amp;
soundFile=mymessage.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>

At first glance, this seems like a real mess, however there area really only three parameters that you need to be immediately worried about: the audio-player.js location (src), the player.swf location (data), and the MP3 location (soundFile). Just set those to the appropriate corresponding locations, load your page to the browser, and you should be able to control the player!

Figure 4. Tweaking Audio Player's Colors

I'd love to hear of anything you do with what was covered in this article! Please email me at the address found in the below bio!

About the Author

W. Jason Gilmore is Apress' Open Source Editorial Director, and co-founder of IT Enlightenment. He's the author of several books, including the best-selling "Beginning PHP and MySQL 5: Novice to Professional, Second Edition" (Apress, 2006. 913pp.). Jason loves receiving e-mail; so don't hesitate to write him at wjATwjgilmore.com.