JavaScript EditorBest javascript editor debugger     Ajax website 

Main Page

Previous Page
Next 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 18.32. 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 18.33. 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 18.34).

Figure 18.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 18.35).

Figure 18.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 18.37).

Figure 18.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 18.38).

Figure 18.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 18.40).

Figure 18.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 18.36).

    Figure 18.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).

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

    Figure 18.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.

Previous Page
Next Page

JavaScript EditorBest javascript editor debugger     Ajax website