AUDIO GUIDE
for Web Developers

All you need to know to put
digital music or sound
into your web pages!

Hear the robot play the
Hummel Trumpet Concerto!
(MIDI version of the Hummel Trumpet Concerto, 3rd movement Allegro sequenced by Brad Spellicy. Used with permission.)
©2001 by Walt Howe
(Last revised 12 July 2001)

Table of Contents

  1. Introduction
  2. Equipment Requirements
  3. File Types.
  4. Coding Sound in HTML
  5. Sources of Sound Files
  6. Copyright Guidance

Introduction

This is a guide to the use of audio files in your web pages. It explains the most common file types and their uses, it explains how to code audio links in your pages, it lists major sources of audio files and clips, and it gives you brief copyright guidance as to what you can and should do with audio files.

Equipment Requirements for Audio

Although most computers come with a built-in speaker, it is of low quality, and audio files will generally not play through it. To play music quality sound files, it requires a sound card and speakers attached to the card. Many notebooks now come with a built-in sound card and small speakers in the notebook, which can be supplemented with plug-in external speakers. Computers sold as multimedia machines usually come with a sound card and speakers included in the price. The earliest sound cards were labelled 8-bit. Then came higher quality 16-bit cards, which refers to the capability to produce high quality, wide audio bandwidth sound. The terminology is confused by new cards with 32 and 64 in their name, which refer to 32-voice and 64-voice synthesizers. Probably the best known maker of sound cards is Creative Labs, maker of SoundBlaster cards.

Audio File Types

Sound files, by their nature are quite large. Types that must fully load before they can play can cause long waits across dial-up speed lines. Most types of sound files are based on taking very frequent samples of the complex sound waves and digitally recreating those sound waves during playback. The faster the sampling, the higher the quality of sound, but the larger the file. Low quality files are typically sampled 11,000 times per second. Medium quality is sampled 22,000 times per second, and high quality is 44,000 times per second. The low quality is akin to telephone sound, and not very good for listening to music. The high quality is similar to FM radio. File sizes may be reduced somewhat by compression techniques.

The earliest types on the Internet, first used with unix computers, use the .au and .snd extensions. These are apt to be the largest files for a given length of audio. Later sound files use the extensions .ai, .aif, .mp2 or .mp3, and .wav. Most modern browsers either have the capability to play these built in to the software or can play them with plug-in software, readily available from Netscape or Microsoft.

If your modem and connection are fast enough, it is possible under good conditions to feed a low to medium quality signal to you fast enough to play in real time over a dial-up connection. RealAudio was the first company to produce streaming audio files and broadcast of live events. These files have the .ra extension, and require you to download the RealAudio or RealPlayer software(the latter combines a streaming video capability, too) from the RealAudio site or buy it in a store. There are other forms of streaming audio appearing now, too, such as the audio components for QuickTime, Shockwave, and Streamworks.

MIDI, another type of sound file uses a resident library of instrumental sounds from your sound card. This technique is called wave table synthesis. The files, instead of reproducing sound waves based on sampling, feed information to the software and sound card on pitch, duration, instrument or type of sound, and other technical characteristics of the sound. The card pulls the prerecorded instrumental sounds from its wave table. These files can be much smaller than those based on sampling, even with many instruments. If your sound card supports MIDI (Musical Instrument Digital Interface) files (with the .mid extension), you can play MIDI files. Quality may vary greatly, depending on the sound card and you can hear very different sounds from different computers. At its best, it can be very, very good. At its worst, it is horrible. It is very popular, though, and large libraries have been built up of MIDI files. See Sources below. MIDI, as an audio standard for musicians, can be used with keyboards and synthesizers independent of computer systems, too.

Check to see if your system is set up to play each of the types below by clicking on them:

  • AI, AIF. No examples available. Check back soon. Try this test page.
  • AU
  • MIDI
  • MP2, MP3. No examples readily available. Try MP3.com for some clips.
  • RA. This connects with the RealPlayer site.
  • SND. No examples readily available.
  • WAV

Coding Sound in HTML

 The simplest way to call a sound file is to simply put a link to the file. Depending on your browser and configuration, it will either invoke your operating system's basic player software, player support built into the browser, or a plug-in that provides the player capability. If you want to control what plug-in is used to play the sound file, you need a more sophisticated call. As an example of the simplest format, the line of HTML code below will call up the file mysong.mid from the current directory with any browser. Note that you can play any sound file with this command format, not just MIDI files:

<a href="mysong.mid"> Play My Song </a>

It is also possible to embed a file into the html code for a page so that it will play in the background. Netscape introduced the EMBED tag and Microsoft the BGSOUND. With the newer browsers, both commands can be used and each browser will ignore the other's command. The examples shown here use MIDI files, but you can substitute other file types with the same results. Here are the paired commands to call a MIDI file. In the first example, the Netscape EMBED call forces the use of the Crescendo MIDI player plug-in. The second example allows any MIDI player to take effect instead of the Crescendo. The companion MSIE BGSOUND call does not specifically call Crescendo.

Example 1:
<EMBED TYPE="music/crescendo" SONG="mysong.mid" HEIGHT=16 WIDTH=16 AUTOSTART=true LOOP=false> <BGSOUND SRC="mysong.mid" LOOP=1>

Example 2:
<EMBED SRC="mysong.mid" AUTOSTART=true LOOP=false> <BGSOUND SRC="mysong.mid" LOOP=1>

Notice that both EMBED and BGSOUND include a LOOP parameter. Set to "false" and "1" respectively, the file does not repeat. Set to "true" and "-1" or "INFINITE", it repeats endlessly until the page is abandoned or the music turned off. BGSOUND also permits a specific number of repetitions.

Then Microsoft introduced ActiveX and OBJECT tags, and the most general answer that gives the most control is to put an EMBED tag inside OBJECT tags. If you want to try this somewhat more sophisticated approach, the formats that work are explained and illustrated for the Crescendo MIDI player's guide to Embedding Plugins.

MSIE 4.0 added support for the EMBED command. If you are willing to omit support for earlier versions of MSIE, you can just use the EMBED command as shown in the examples above.

Different versions of Netscape and MSIE have responded in different ways to this code. There is a JavaScript approach that will work with all these (as long as your browser supports JavaScript) at Crescendo's JavaScript for both Netscape and MSIE page. Try it, if you want to cover as many bases as possible.

Another excellent source that explains JavaScript approaches to playing music is the article Writing a MIDI HiFi System in JavaScript at developer.com.

Sources of Sound Files

Just Jazz. A superb collection of Jazz MIDI files.

TuDogs:Free Music. A rated selection of pointers to music source sites. Mostly MIDIs.

Music Selection Resources on the WWW. A large selection of music and music-related links, briefly annotated.

Classical MIDI Archives. The definitive classical MIDI collection.

Worldwide Internet Music Resources. A large collection of music resources from the Indiana U music library, including some music clips.

SoundAmerica. Over 10,000 sound files of all sorts in .wav format.

The All-Music Guide. A bit of a misnomer, since it is very weak on classical and show music, but very strong in popular music.

Copyright Guidance

When music is played, there are two copyright considerations. Unless the work was written in a previous century, somebody probably owns the copyright to the music (and lyrics, if any). For recorded music, the performing artist or artists also hold a performance copyright. For television, radio, and club performances, most of the copyright fees are handled by ASCAP and BMI. Performance rights for recordings are handled by RIAA. They are beginning to vigorously enforce copyright for web pages, too. Web licensing is a new field, but RIAA, ASCAP and BMI are dogged pursuers of copyrights, and they can't be ignored. BMI has a MusicBot that searches the nets looking for violations. Not long ago, there were two major classical music MIDI sites. One pulled all the 20th century composer works with a note that it was for copyright reasons. The other didn't, and it recently disappeared without notice.

The National Music Publishers Association (NMPA) and their licensing arm, the Harry Fox Agency have been vigorously cracking down on websites that post unlicensed copyrighted works. Many MIDI sites have been closed recently.

To dispel a few common misconception, you have no fair use right to put a recording on your web pages. And although some have suggested that short clips under 30 seconds are all right to use, that has not been established in the courts.

ASCAP will be glad to sell you rights to put recordings on your web page. The minimum charge is $264 per year. See ASCAP's Internet Licensing FAQ.

See our Copyright Guide for more information.

If you found this useful, see our Graphics Guides, too:

SUGGESTION FORM

What would you like to see added to this Guide? Do you have any comments, corrections or suggestions for improvement? Use the form below, and we will give your ideas prompt consideration.

Your e-mail address (optional):
Back to top
Back to Learning Tree
Go to Top Go to Learning Tree