Adding streaming Flash audio to a Web site
Thursday, November 23, 2006
An organization recently asked me to add audio to its Web site. The primary purpose of the Web site was to inform the organization's members about new developments. My client specifically wanted to add voice recordings of organization leaders talking to members about recent news. They were already using blog software to post news items in text format, but they wanted to add audio to give it a more personal touch. The audio would also benefit members who were more fluent in spoken English than in the written language.
The client needed to keep costs low, while allowing for daily updates; so part of the challenge was to find a self-service solution that would allow the client to handle most of the routine updates after we worked out the basic system. The same things that made this solution simple enough for the client to use would also make it fast and easy for a Web builder to implement.
Selecting a sound format
The first task was to select an appropriate file format for the audio files. We were looking for a format that met the following criteria:
- A cross-platform solution that works with media players, which most site visitors would already have available. The client wanted to avoid requiring the visitor to download player software. If a player is necessary, it must be free and easy to obtain and install.
- Any programs that are needed to prepare and post the audio files must be low-cost and easy to use.
- The time from voice recording to Web publication must be as short as possible in order to facilitate the frequent updates.
- The visitor should be able to hear a two-minute audio clip without undue delay—even on a dial-up connection. This means that we were looking for a streaming audio format with efficient compression. (In this case, streaming means the ability of a player to begin playback from a buffer without waiting for the entire file to download. We're not talking about pushing a full-time audio stream like that of Internet radio.)
- The format shouldn't require any special server facilities. It needs to run on a standard HTTP server without installing special software or enabling extra ports.
I considered several possibilities. The WAV format enjoys almost universal playback support, but the file size is too large. I rejected the Real and QuickTime formats because the availability of respective players isn't high enough (at only about 40 to 50 percent of users each). The MP3 file format offers good quality along with good compression, but only a few media players can stream MP3 files directly. Windows Media Player 9 supports MP3 streaming, but the player isn't available on Macs, and there are problems getting it to install and run properly on many older Windows machines.
I finally settled on the SWF file format because the Macromedia Flash Player has the highest installed base of all the media players. (Macromedia claims that the Flash Player is installed on 98 percent of all computers. That number is probably exaggerated, but even conservative estimates put the number at more than 90 percent.) It's a cross-platform solution with very modest hardware requirements, and it's probably the easiest of the media players to download and install if a visitor needs a new or updated copy.
You can embed audio files (including MP3s) in a Flash movie, and all but the oldest versions of Flash Player support streaming. Versions 6 and 7 of Flash Player support their own audio compression that is even more efficient than MP3, but I opted not to use that feature in order to retain compatibility with older versions of the player. I also wanted to minimize the chances that visitors might need to upgrade their installed players in order to listen to the audio.
Selecting the tools
One of the biggest potential drawbacks to working with Flash movies is that Macromedia Flash is expensive software that requires a substantial learning curve. It's a great tool for professional Web builders, but it's not practical for most clients to use. However, there are several third-party programs that are also capable of producing SWF files, and while they may not have the power of the full Flash program, they can provide an easy and cost-effective way to perform certain limited tasks.
In this case, I looked at two small utility programs designed especially for embedding audio into a Flash movie. One was Boomer from Crazy Ivan Productions, and the other was MP3 Sound Stream. Both utilities do their job with point-and-click ease. I went with MP3 Sound Stream because it's a little simpler to create a Web page with control buttons, along with the movie containing the audio clip.
In addition to the utility for producing SWF files with embedded sounds, I needed the following:
- A digital audio recorder: My client records the voice clip with a handheld digital recorder that produces WAV files, but you could also record the original audio directly onto a computer using a microphone and the built-in Windows or Mac sound recorder.
- An audio editor to clean up the recorded audio: Audacity is one of several good options for an audio editor. Depending on your audio source, you may not even need a separate audio editor. In fact, my client ultimately decided to forgo editing and simply re-record the sound bite until they got a good take.
- A way to post the audio files to the Web server: Since my client was already using the Movable Type blog software to maintain the news area of the site, we used Movable Type's file upload to post the audio files. For other situations, you might need an FTP utility for this purpose.
Establishing the workflow
With the pieces in place, all that remains is to give the client instructions on how to create an audio clip and post it to the Web site. Here's an abbreviated version of the instructions that outline the basic workflow:
Record the audio clip and save it on your computer as a WAV or MP3 file. If necessary, edit the audio file.
- Open MP3 Sound Stream and select the audio file. Confirm that the desired options are set, and then click Go. MP3 Sound Stream creates three files: a Flash movie with the embedded audio, another Flash movie with playback control buttons, and an HTML file to hold those controls.
- Log into Movable Type and select the blog where you'll post the audio.
- Use Movable Type's Upload File feature to copy each of the Flash movie files to the server.
- Use Movable Type's Upload File feature to copy the HTML file to the server and also create a new blog entry containing a link to that file.
- Edit and publish the blog entry.
The client now has an audio clip posted on the Web site. More than 90 percent of the site visitors will be able to play that audio clip successfully without downloading a new media player, and the built-in streaming of the Flash Player means that playback will start after only a few seconds' delay.
posted by Arun @ 10:15 AM,
