Embedding MP3 Audio on a Page

Embedding MP3 Audio on a Page

The MP3 compression format is the de facto standard for audio files on the Web. One way to embed MP3 audio tracks right in your Web page is to use the QuickTime player for playback.

To embed MP3 audio on a page:

Save your audio tracks in MP3 format. You can use iTunes to convert AIFF files to MP3.

Figure. To determine which buttons appear on your page, adjust the width attribute of the object elements.

Follow the instructions for putting regular QuickTime movies on a page (see pages 286293) using audio/mpeg for the type attribute in the second object.

Figure. I've got two MP3 files on this page with just the first three buttons. As with other QuickTime files, Internet Explorer for Windows (top) reads the first object element while standards-loving browsers like Firefox (below) use the second.

Use a value of 16 for the height of your controller.

For the width, use:

a value of 17 for just a play button (Figure).

34. The play button appears alone when you use width values between 17 (shown) and 32.

a value of 33 to add a plug-in pop-up menu button to the play button (Figure).

35. The plugin pop-up menu button is added to the play button when you set the width to 33 (shown here) or more.

a value of 49 to add a volume button to the other two (Figure).

37. When you use a width of 49 (shown here) or more, you get a volume button.

a value higher than 74 to add a progress bar to the other three (Figure).

38. From 74 pixels on (shown here), you get a progress bar.

a value of 106 to add fast forward and rewind buttons to the other four (Figure).

40. At a width of 106 pixels, the fast forward and reverse buttons appear.


  • I recommend setting the autoplay parameters to false. But that's only because I hate it when I go to a site and it blares music at me. Especially when my husband is sleeping.

  • You can hide the plug-in pop-up menu by adding <param name="kioskmode" value="true" /> to the object elements, thereby making it a bit harder (but not impossible) for people to copy your MP3s. In that case, you'll have to adjust the widths accordingly.

  • If you use intermediate values other than the ones I've specified, you'll get more space between the buttons (Figure).

    36. If you use an intermediate value, like a width of 40 (shown here), you get extra space between the buttons.

  • Widths higher than 74 will make the progress bar wider, except when the fast forward and rewind buttons appear at width 106 (Figures 18.39, 18.40, and 18.41).

    39. If you use a value between 74 and 105, the progress bar grows accordingly. (Here, the width is 90.)

    41. You can make the controller as wide as you wish. Any extra pixels after 106 are added to the progress bar. (This controller is 150 pixels wide.)

  • You can hide the controller altogether by using <param name="hidden" value="true" />. While you might think you could just set the controller parameter itself to false, that option is really intended for hiding the controller under video. If you try to set an audio controller parameter to false, you'll get an empty gray box with the dimensions you specified for height and width. Apple does not recommend setting those to 0.

  • If you do hide your controller, say, to create background sound, remember to set the autoplay parameter to TRue. Otherwise, there won't be any way for your visitors to hear your MP3s.

  • Explorer will hide the controller if you use the hidden parameter, but it leaves an empty space for it. (Thanks a lot!) Since Apple cautions against using a height less than 2 pixels due to problems in some browsers, my recommendation would be to either use a value of 3 pixels (!) or put the hidden sound at the end of your (X)HTML page where it won't mess up your layout.

 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows