HTML and CSS Reference
In-Depth Information
Caution: The order of the audio file references should not be important, but I found warnings that
Firefox will not work if MP3 is listed first. That is, it won't go on to try and work with another file.
The
<audio>
element has attributes I didnt use in the rock-paper-scissors game. The
autoplay
attribute
starts play immediately on loading, though you do need to remember that with large files loading is not
instantaneous. The
src
attribute specifies the source. However, good practice is to not use the
src
attribute in the
<audio>
tag, but to specify multiple sources using the
<source>
element as a child of the
<audio>
element. The
loop
attribute specifies looping, that is, repeating the clip. The
controls
attribute
puts controls on the screen. This may be a good thing to do because the clips can be very loud. In order to
make the audio a surprise, though, and to not add clutter to the visual presentation, I chose not to do this.
Heres a simple example for you to try. You will need to download
sword.mp3
from the topics download
page at
www.friendsofed.com
or
find your own audio file and reference it by name here. If you open the
following HTML in Chrome
Audio example <br/>
<audio src="sword.mp3" autoplay controls>
Your browser doesn't recognize audio
</audio>
youll see whats shown in Figure 8-8.
Figure 8-8.
Audio tag with controls
Remember: for our game, we will play audio for the rock crushing the scissors, the paper covering the
rock, the scissors cutting the paper, and a sigh for any tie. Here is the coding for the four audio clips in
rock-paper-scissors:
<audio autobuffer>
<source src="hithard.ogg" />
<source src="hithard.mp3" />
</audio>
<audio autobuffer>
<source src="inhale.ogg" />
<source src="inhale.mp3" />
</audio>
<audio autobuffer>
<source src="sword.ogg" />
<source src="sword.mp3" />
</audio>
<audio autobuffer>
<source src="crowdohh.ogg" />
<source src="crowdohh.mp3" />
</audio>
