Audio Files on the Web

by Steven G. Estrella, Ph.D.

QuickTime Audio Embedding Assignment

If you are certain that your visitors have high-bandwidth connections or you gave your users advance notice of the file size on a previous page, then you may embed an audio file in the page. The specific code for embedding content is different for each plugin. The example below uses the QuickTime plugin.

QuickTime Audio Embedding for Advanced Users

In most cases, however, you can't be sure that visitors are using a high-bandwidth connection to the Internet. To avoid subjecting unsuspecting visitors to long download times, you can use the Quicktime poster movie technique.

The QuickTime plugin allows the designer to embed a small section of a movie (usually one frame), called a poster movie, and link it to the original, larger movie. The target and href attributes in the embed tag are set to load the new movie in the same space on the screen as the poster movie. View the code of this page and note how the controller is set to false on the initial poster movie. The autoplay attribute has been removed from the code because it is irrelevant for a still image. Also note that the HREF URL is relative to the location of the movie not the location of the page. Since the poster frame is displayed without a controller, it is necessary to specify a white background color to mask the extra 20 pixels allocated in the code for the controller needed for the full movie. The audio example uses a small QuickTime movie called audiostub.mov that contains a still image of a playback controller.

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 "audioQTembedding.htm." 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 MP3 file to your hard drive. You can do the same to download the audiostub.mov file using this link. Store the files in a folder called "mp3" inside the same folder as audioQTembedding.htm.

File structure for this project:


[ Back to Web Audio ]