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.

Tips

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.

Embedding MP3 Audio on a Page

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

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.

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

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.

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

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

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

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

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

Embedding MP3 Audio on a Page

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

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.

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

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.

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

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

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

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

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

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

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.