MP3 (using Quicktime player):
Wav (using Quicktime player):
Real Audio (using Real Player):
Windows Media Audio (using Windows Media Player*):
*Mac users will need to install the Flip For Mac plug in.
So you want to put some sound on your web page? Well the easiest (and least problematic) way to do this is to simply create a link (using <a href>) that points to the sound file. But this isn't very elegant.
So what if we want to embed a sound file into the content of a page? Well, once upon a time you had two choices: <embed> for Netscape and <bgsound> for Explorer; however both are rapidly going the way of the dinosaur. Today the tag of choice is the <object> tag. Here is the basic code to embed an mp3 file on a page using the <object> tag:
<object type="audio/x-mpeg" data="fileName.mp3" width="200" height="16" autoplay="false">
</object>
The "type" is the mime type that identifies that kind of file (mp3, mov, ra, etc.). "Data" points to the desired file (much like a url). "FileName.mp3" should be replaced by the name of the audio file you are embedding. "Width" and "height" determine the size of the controller. "Autoplay" is pretty self explanatory. There are additional attributes that can be used (though not every browser will recognize every one).
Easy right? Well, now things get more complicated...the information above should be all that you need according to W3C recommendations, and for some browsers (Firefox, etc.) it is. But, alas, some browsers (Explorer 6, Explorer 7 and Safari) require additional information to "prompt" them (new code is in red):
<object type="audio/x-mpeg" data="fileName.mp3" width="200" height="16" autoplay="false">
<param name="src" value="fileName.mp3" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="autostart" value="0" />
</object>
The "param" tags contain the same information as in the <object> tag, just written in a different way. As with the <object> attributes, additional <param> tags can also be added (one of my favorites is "kioskmode").
We're done, right? Nope. Then there's the issue of old versions of IE which need to be told what media player to use, especially when attempting to play non-Windows Media Player files. This is where the "class id" comes in; two <object> tags are nested within one another, one using a classid (for IE), one using a mime (for everyone else). Standards-compliant browsers like Firefox ignore the classid crap and jump to the <object> tag that contains the mime type. Explorer needs the class ID, but gets confused by the <object> tag with the mime type and will display something hideous or give you an error. Therefore we add the funky comment tags to prevent Explorer from seeing what it shouldn't (oh by the way, IE sucks):
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="200" height="16">
<param name="src" value="fileName.mp3" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="autostart" value="0" />
<param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
<!--[if !IE]> <-->
<object type="audio/x-mpeg" data="fileName.mp3" width="200" height="16">
<param name="src" value="fileName.mp3" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="autostart" value="0" />
<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
</object>
<!--> <![endif]-->
</object>
Finally, some older browsers (Netscape 4) require the old <embed> tag. This can be nested between the inner <object> tags as below:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="200" height="16">
<param name="src" value="fileName.mp3" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="autostart" value="0" />
<param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
<!--[if !IE]> <-->
<object type="audio/x-mpeg" data="fileName.mp3" width="200" height="16">
<param name="src" value="fileName.mp3" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="autostart" value="0" />
<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
<embed src="fileName.mp3" type="audio/x-mpeg" width="200" height="16" autostart="false" controller="true" ></embed>
</object>
<!--> <![endif]-->
</object>
Fortunately, most modern browsers recognize the <object> tag; soon the <embed> tag may be completely unnecessary.
So what about other sound formats? You will need to change the "type" to the appropriate mime type (see a partial list below):
As for "class id's," and "codebase's," see the list below:
There are also some controller variations. Set the height of the Windows Media controller to 25px (on a Mac, using Flip For Mac, the 16px height is all you need since WM files are played through the Quicktime player. However, on a PC, the Windows media files will use a Windows Media controller skin which requires more height).
Real Audio does not recognize the <param name=controller value="true" /> parameter. Instead use <param name="controls" value="ControlPanel">, and also set the height for 25px.
Create a web page with embedded sound files.
10 pts |
Went well above and beyond and created something special. |
9 pts |
Went above and beyond requirements (added styles, additional sound files, etc.) |
8 pts |
Did what was required. |
7 pts |
Missing one or more required elements or contains one or more errors. |
0–6 pts |
Poor showing; mostly incomplete or full of errors. |