Writing.Audio Development for the Web
Last updated on Tue Jan 20, 2009 |

There was a time when the World Wide Web was a silent place. Text, and eventually images too, made up all of the content to be found in cyberspace. It wasn't too long, though, before the first sounds started squeaking their way out of web pages in the form of MIDI files, Adobe (or, at the time, Macromedia) Shockwave, and Java applets among other things. Anyone who was hanging out on the web in those days may remember fondly the period when everyone's personal homepages seemed to contain a MIDI file that started playing as soon as the page was loaded. If you don't remember those days, just think modern day MySpace but without the benefit of polyphonic sound files. Years later, we've come a long way, if not in our ability to use audio with discretion then at least to use higher quality audio technologies.

It seems that every couple of months I'm either asked by a web development client or a friend working on a personal project about adding audio to a website. Generally, the questions aren't technically specific; they're more like, "You know, I'd really like to add some audio to my website. How's something like that done." People are used to being able to go everywhere from Amazon.com to their local church's website to hear audio clips of one type or another. We purchase full songs and albums online, listen to podcasts, and and get snarky little ecards with cutesy animations that sing us Happy Birthday offkey. Audio on the web is so familiar these days, that the general assumption is that it must be very easy just to slap some sound down on your site and move on. However, I think that any professional web developer would admit that while the concepts behind adding sound to a web site aren't necessarily hard, there are a lot of ways to create and distribute audio and therein lie the sometimes difficult (and often time-consuming) parts.

Realistically, there are a finite number of ways to add sound to a website. A lot of those methods are based on proprietary file formats that require the sound creator to purchase some piece of software. Or, sound is just a small part of what can be done within a much larger piece of technology. For all of those solutions, there are countless books and other resources to teach you the ins and outs of using some particular product to its fullest. Tools like Adobe Flash and Apple's GarageBand come to mind. These are both fantastic tools, but unless you have a few hundred dollars to invest in Flash or you're already a Mac user with the iLife suite, these options probably don't help you too much. If you have the time and money to invest in sophisticated technologies such as these or others like them, then that's great. You'll probably have fun working in them and be inspired to create many more things. But, for those people without that kind of money or time to invest, there are still some fantastic options open to you to create professional-grade audio with no monetary investment and in a relatively short time.

Before we go any further, let's take a minute to talk about some very basic audio file concepts. If you're new to audio development, you may get a little overwhelmed by all of the different types of audio floating around out there. There's actually a really nice and short introduction to this concept over on Wikipedia (http://en.wikipedia.org/wiki/Audio_file_format). While a discussion of all the different formats goes far beyond the scope of this article, we do need to focus on a few that are particularly important for Web usage — wav, mp3, rm, and wma. Wav files are often familiar to Microsoft Windows users. They are the very large, CD-quality audio files that a lot of people know through audio ripping and CD burning programs. Wav files are generated in a lot of different ways, and they seem to be what many people have when they first start thinking about adding sound to their websites. Mp3 is a high quality, compressed audio format that quickly went from being relatively unknown to being practically synonymous with "online" music. These days, everything from cell phones to DVD players can play these compact little files. Rm (also ra) files are the proprietary "Real Audio" formats developed by RealNetworks specifically for streaming audio content over the Internet. (More on that in just a minute.) Wma is a proprietary file format created by Microsoft that, like mp3s, can be used in everything from DVD players to some cell phones. By completely unscientific and anecdotal evidence, it seems that mp3, rm, and wma are the most commonly used audio formats on the web for distributing free audio content. (This claim, of course, excludes the entire Apple iTunes catalog as well as audio embedded in Flash movies.) For this reason, the remainder of this article will focus on just these four formats.

One of the first things you have to ask yourself once you've decided to add audio to your website is why you want to include it at all. Do you want to provide people with complete high quality recordings that they can save to their computers and maybe even other external devices? Do you want people to just get a passable sample of some audio that they can listen to on your website but save to their computer with greater difficulty? Maybe you actually have a large collection of audio files that you'd like to broadcast over your own Internet radio station? Ultimately, why you want music on your site will determine the formats you want to provide. And, while an argument could probably be made for any one of these formats over any of the others, I'm going to suggest to you a simple set of rules.

1. Use mp3 if you want to distribute high quality, portable audio. Many people will have to download the entire mp3 before they can begin hearing your file, but you're okay with that. Also, you expect people to be able to save your audio to their computer or anywhere else and potentially pass it around to their friends, and you're fine with that too.
2. Use both rm and wma simultaneously if you want people to be able to start listening to your file without having to first download the whole thing. You still expect people to be able to save your audio to their computer or anywhere else and potentially share it with others, and you're fine with that.

So, what about that Internet radio station? Or, what if you're not fine with people being able to save your audio file to their computers or anywhere else? Well, this is where streaming comes into play. In very general terms, streaming technologies make a connection between a media server in one location and a client (think, player) in another location, and then the content is continuously pulled into and rendered by the client. Let's go back to that mp3 file for a second. If you place a link to an mp3 file on your website, someone can come along, download the file in its entirety and then play back the copy that they now have stored right on their computer. If, on the other hand, you had streamed that same audio to their computer, then, in theory, the audio would only be available to them so long as the connection between their client software (the thing playing the music) and your streaming media server was open. Once the connection is closed, there is no file to be copied and used on other hardware or to share with other people. That's the promise; the reality, however, isn't quite that black and white. While it's true that streaming your audio makes it much more difficult to save and copy to other devices or share with other people, the simple fact is that there are tools called stream rippers that allow people to save streams as they're coming in from a media server. Using a stream ripper, your content is still entirely vulnerable to being copied and distributed. There's simply not enough room here to discuss all the ways that you can try to protect your online content (and all of the ways protection schemes are commonly thwarted). If streaming technology is really what you're interested in, than you can skip right to the end of this article for a few more details on streaming media servers and resources to continue. If, however, you don't need to use a streaming media server, then read on.

So, you know why you want audio on your site, and you even know what formats you want to provide your audience with, but you're just not sure how to get what you already have converted into either an mp3, rm, or wmv format. You're not a fulltime audio (or web) developer and you really don't want to spend any money on this. You just want to share your audio with your website visitors. In that case, let me introduce you to your new friend, Audacity.

According to its website at http://audacity.sourceforge.net, "Audacity is free, open source software for recording and editing sounds. It is available for Mac OS X, Microsoft Windows, GNU/Linux, and other operating systems." Although you may not get it from that description, one of the most important reasons for your purposes to know about Audacity is that it's a great tool for converting audio files from some format into either wav or mp3 formats. Plus, it's got some really nice editing features that are perfect for the types of things many people like to do with their web audio content — combine clips into a single clip, fade-in at the beginning our out at the end of your clip, increase or decrease the volume, etc. The Audacity interface should be fairly intuitive even for people new to audio editing, and the software comes with built in help documents that explain how to use it.

Creating mp3s out of other audio files with Audacity is a snap. First, start up Audacity and then use the "File" dropdown at the top of the screen to "Open" your existing audio file. Audacity will load the file into the main work area showing you a timeline of your clip. This is where you can zoom in or out on your audio to edit it many different ways. Read through the documentation that comes with Audacity to learn more about editing techniques. When your clip sounds the way you want, simply go back up to the "File" dropdown and select "Export as MP3." You'll be asked to give your audio file a name and tell Audacity where you would like the resulting mp3 saved. Next, you'll be given the chance to add ID3 tags to your mp3. You can think of this as textual information that will get stored along with the audio content right in the file. When people play your mp3, some mp3 players will display the text you've entered here. You can skip this part altogether, but it's generally nice for your listeners to include it. Also, you'll notice you're given the choice between saving the ID3 tag information in either ID3v1 format or ID3v2 format. I recommend ID3v1 format, because, like Audacity says, it's still compatible with more players than ID3v2. That said, either choice should be fine. Finally, press the "OK" button and watch Audacity generate an mp3 file for you.

Now that you have your mp3 file, you want to add it to your website. Adding a link to an mp3 file is no different than adding a link to another web page. The HTML code for linking to an mp3 file called "MySong.mp3" could simply look like:
<a href="MySong.mp3">Listen to my song</a>

So, now you know how to create and add mp3s to your website without any problems. And, that's great, but you may start getting complaints from people saying that they have to wait 5 minutes just download your mp3 before they can start listening to it. And, frankly, while they're interested in hearing your audio, they just don't have the patience to wait that long for the download. You need to provide your content in a format that starts playing faster than an mp3 does. This is where rm and wma files come in.

Both rm and wma files require that your listeners have software installed on their computers that is capable of playing these types of audio. This shouldn't be a problem for many people, as most modern computers come bundled with something that can play back one or both formats. Plus, because it's possible to play either rm or wma files with free players on Linux, Mac, and Windows operating systems, anyone who doesn't already have the ability to play either type of file can easily download and install a free player to take care of the problem. That said, I recommend that you provide your audio in both formats, because your audience may already be able to play one type of file but not the other. Providing both formats is just a courtesy to save your listeners the extra step of having to download and install an extra player.

Regardless of the format, the important part for our purposes is actually the players that will play them. Even without a true streaming media server, these files can be downloaded and played in a quasi-streaming fashion. That is, when your website visitors click on a link to either an rm or wma file, their audio players will begin to download the contents of your file. When some data has been downloaded (but before the entire file has been), the audio will start to play even while downloading continues in the background. The audio player will make sure that it always has a little more content downloaded than it has played, and this buffer area will ensure that your audience can listen to your content uninterrupted but also much sooner than they would have been able to by having to first download an entire mp3 file.

Luckily for you, just as there is free software available for playing back rm and wma files, there's also free software available for creating this type of content.

As you already know, RealNetworks is the creator of the rm format. So, it stands to reason that they are also the creators of RealProducer — a tool for creating content in RealNetwork's various proprietary formats. There are currently two versions of RealProducer: RealProducer Plus and RealProducer Basic. While the Plus version does much more than the Basic version, the Basic version is free of cost and should suffice for many people and purposes. You can learn more about both programs and get instructions on how to download the Basic version from the RealNetworks website at http://www.realnetworks.com/products/producer/basic.html.

One particularly important difference to note between the Plus and Basic versions of this software has to do with licensing. According to RealNetworks, "You may only use RealProducer Basic for personal use to create RealAudio encoded media that you do not sell, rent, lease, license or exchange for value. To create RealAudio encoded media that may be sold, rented, leased, licensed or exchanged for value, you must use RealProducer Plus." In other words, if you plan to do anything other than freely give away your RealMedia content, you're going to need to purchase RealProducer Plus.

Also, while RealProducer is available for use on both the Linux and Microsoft Windows operating systems, the program is quite different depending on where you run it. In Windows, there's a very nice graphical user interface with two panes that let you work with your source and target files — that is the file you're starting with and the file you're creating. Options are set in this version of the software through dropdown menus, checkboxes, and other graphical controls. In the Linux version, the end result is the same, but the whole program is run in a text-only mode from the shell. Target file settings are achieved by passing commandline options to RealProducer which can be found either in the man pages that get installed with the package or simply by running the producer command without any arguments.

Lastly, RealProducer prefers to work with source audio that is in the wav format. If your audio is not already stored in wav files, don't worry. Just open your content up in Audacity and follow the same instructions listed above for creating mp3s, except when you're ready to export your audio, choose "Export as WAV" from the File dropdown instead of "Export as MP3." Then, just import your new wav file into RealProducer.

Mac users, you may have noticed that I said that RealProducer is available for Linx and Windows only. There was an earlier version of RealProducer that ran on OS 9, but as of this writing, I couldn't find it on the RealNetworks website. However, if you're a Mac OS X user, then you're going to want something called the "Real Export Plug-In" anyway. This is a free piece of software that can be downloaded and installed on Mac OS X to, according to RealNetworks, generate RealMedia and RealAudio directly from "Apple Final Cut Pro HD, Adobe After Effects, Avid Xpress and more." For more information about the Real Export Plug-In, visit the RealNetworks website at http://www.realnetworks.com/products/realexport/index.html.

Because you want to make it easy for a wide audience to be able to listen to your audio without too much extra work, you're going to provide your content in the wma format as well. And, just as RealNetworks provides people with a free tool to create audio in their proprietary format, so, too, does Microsoft provide you with a free tool for creating content in their proprietary format. To create wma files on the Windows operating system, you can download the free Windows Media Encoder from Microsoft at http://www.microsoft.com/windows/
windowsmedia/download/AllDownloads.aspx. Unfortunately, it's not quite so easy to create wma files on the Linux or Mac operating systems. There seem to be a number of rumors floating around the Internet about various inventive ways people have created wma files on non-Windows machines, but it seems like most claims are followed up by responses from other people saying the same set of tools did not work for them. Linux users can definitely run the standard Windows Media Encoder under Wine, which, even though not a native solution, does allow you to create wma files from your Linux box. Mac users can, likewise, run the Windows Media Encoder under Parallels, but that solution really isn't so great unless you're already running Parallels with some modern Windows operating system. Again, though, this just comes down to convenience for your audience. The percentage of people that can easily play wma content is just so large, that it should be considered on some level.

The Windows Media Encoder software itself is fairly straightforward to use. Like RealProducer, it provides you with a two-paned window for your source and target files. And, like RealProducer, you're probably better off starting out with a wav file for your source file. Again, just use Audacity to convert your content to a wav file if its in a different format. Then, open your wav file into the Windows Media Encoder and export it out to a wma file. You'll have some options about bit rate that will determine how high quality of audio you'd like to produce. This decision is probably best made based on the type of content you're working with — you may want to consider a higher quality for music clips and lower quality for voice-only clips.

Adding links to your wma and rm/ra files to your website is as easy as adding links to your mp3 files was. Your HTML code could be as simple as:
<a href="MySong.rm">Listen to my song in RealMedia Format</a> or <a href="MySong.wma">Listen to my song in Windows Media Format</a>
When website visitors click on the links, the default player settings on their computers will take care of connecting to your server, downloading, buffering, and playing back your audio content.

At this point, you may be wondering, Is that really all there is to creating and distributing audio online? Actually, that's pretty far from all there is. However, using the techniques described here, most anybody should be able to use free-of-charge software to make and offer non-streaming sound files over the web in some of the most popular formats. For various reasons, a number of other equally good options were purposefully left out of this article. At the very least, you may want to consider looking into Apple's Quicktime format as a compliment to what was described here. Likewise, if you're already considering learning Adobe Flash, you may want to think about using it as a medium for delivering your audio content — especially if you don't want to make it easy for people to save a copy of your audio content to their computers or share it with others.

If you would like to learn more about true streaming media servers, you can start with the Wikipedia article at http://en.wikipedia.org/wiki/Streaming_media. Also, check out this somewhat dated but still useful article from Network Computing at http://www.networkcomputing.com/showitem.jhtml?docid=1702f3. If you decide you definitely want to move your content onto a streaming media server, here are some possible solutions to consider depending on your needs:

[01-20-09 UPDATE] Additonal options added below.

• Apple QuickTime Streaming Server
• Icecast Streaming Media Server
• Live365
• Microsoft Windows Media Server
• Nullsoft SHOUTcast Radio
• RealNetworks Helix Server
• Streaming Culture
• Streaming Media Hosting
• UpStream Networks
• Unreal Media Server

Finally, regardless of how you choose to add audio to your website, just remember that no matter what delivery technology you choose, there's no substitute for quality content. If you're preparing to upload your four-year-old nephew's rendition of Mozart's Ode to Joy performed solely through burps, no file format will make the performance enjoyable to hear.