Audio Files on the Web

by Steven G. Estrella, Ph.D.

Simple Link Assignment

The oldest technique for using audio on the Web is to simply include a link to the file as seen below. This technique allows the client (the one visiting your Web page) to open the media file using whatever software he/she has installed for that purpose. That assumes, however, that the user understands how to configure his/her Web browser to use a given helper application to open the movie. In 2004, most browsers come with the Flash plugin pre-installed. Other popular plugins include the QuickTime plugin, the RealOne plugin, and the Windows Media Player plugin.

Here are two simple links to audio files in MIDI and MP3 formats. Please note that I have included the file type and file size in the text of the link as a courtesy to the visitor. Each file will be opened by whatever application is designated for that file type on the visitor's browser.

Bach Invention MIDI file (12k)

Scott Joplin MP3 file (488k)

A Simple Link with an Image

Sometimes it is nice to include an image in your link to make it even clearer to your visitor that an audio file is available. In this case it is wise to link both the image and the text to the audio file as seen below.

speaker icon Scott Joplin MP3 file (488k)

If you specify border="0" (that's a zero, not an oh) for your image tag, the link on the speaker will be less obvious but the image will be more attractive.

speaker icon Scott Joplin MP3 file (488k)

Learn the Code

Right click (control-click on Mac) on this page and choose the option to view the source code of this frame. On some older browsers you can choose "View Source" from the View menu of your Web browser to view the code of this frame as well. Then create a page of your own called "audiolinking.htm" with links to audio files. You will need at least one MP3 file for this assignment. If you don't have any that you can legally use, just use the Scott Joplin MP3 file on this page. Right-click (control-click on Mac) this link and then download the file to your hard drive. Store the file in a folder called "mp3" inside the same folder as audiolinking.htm.

File structure for this project:


[ Back to Web Audio ]