SOUND - HTML5 - page 207

click action so that it sound as though clicking the link made the sound. Of course, that's the
idea. Otherwise, if the page takes even a little while to load, the click sounds when the page
comes up — sort of like clicking itself into place.

At the time of this writing, the Opera and Firefox browsers on the Macintosh did not work
when the type attribute was added to the <source> tag, but with Safari and Chrome it did.
However, when the type attribute was omitted, the Web pages worked i ne with all the
Macintosh HTML5 browsers. In testing on Windows 7, the latest versions of Firefox and
Safari did not generate sound, but both Opera and Chrome did with the same i les. (h is is
why Web developers age quickly.) However, HTML5 is still young, and many of the features of
HTML5 are still in development. So, by the time you're reading this, these dif erences may
have been resolved.

INTEGRATING SOUND EFFECTS INTO A WEB PAGE
One feature of sound ef ects that can make them dii cult to work with if you're not using the
controls attribute is getting them to i re when you want. With plain HTML5, about the
only way to i re of a sound is to place a page into an iframe and play the audio automati-
cally. With JavaScript, far more elegant and sophisticated solutions are available, but function-
ally, using iframe works.

h e following four HTML5 pages are made up of one page that loads three other pages into
an iframe . As each page loads, it plays a sound ef ect: a dog bark, a scream, and an explo-
sion. h e user sees the iframe turn the color of the speaker button that was clicked and
hears the sound ef ect, and no JavaScript was used at all. Figure 10-5 shows what the users see
when she clicks on the green speaker icon.

211

Figure 10-5: Triggering sounds using links to an iframe .

You'll need to download (or create) three sounds, each in both .wav and .mp3 formats. Use
short sound ef ects and when each of the icon buttons is clicked, the sound plays by the page
loading in the iframe . h e page being loaded has nothing but the sound, and for this
demonstration, it has a background color matching the speaker icon color. Place all the pages
and the six sound i les in the same folder. (h e following i les are in this chapter's folder at
www.wiley.com/go/smashinghtml5 : SoundFrame.html , sound1.html , sound2.
html , sound3.html .)