SOUND - HTML5 - page 200

As you can see, the only audio format that comes close to support by all browsers is .wav .
h e good news is that .wav i les are widely available, and you can i nd just about any sound
you in .wav format. However, if a signii cant number of your user audience prefers the
Google Chrome browser to the others, you're going to need a Plan B.

SAVED BY SOURCE: PLAN B
Usually, if you have to determine which browser is going to work with dif erent resources,
you're going to have to break out the JavaScript. Fortunately, HTML5 has an element that can
of er up several dif erent audio formats and let the browser select the one that's compatible.

h e <source> tag can be placed within the <audio> container with the source and URL of
the audio inside the <source> tag. Suppose that you're running a Web site with audio
instructional materials — you talk learners through HTML5, for example. Instead of telling
everyone that they have to use a certain type of browser, all you need to do is have i les for all
possible browsers and let the browser pick the one it likes. For example, let's say that you're
setting up Lesson #3 on a Web page. h e following would provide a selection of i les that no
browser would pass up:

< audio controls >
< source src = ”instruction3.ogg” >
< source src = ”instruction3.mp3” >
< source src = ”instruction3.wav” >
</ audio >

204

h e chore of making multiple versions of audio i les may be annoying, but even if you
programmed it in JavaScript, you'd need multiple copies of the media. (In Chapter 9, multiple
copies of a graphic i le were required for mobile and non-mobile platforms that used JavaScript
to sort out whether the page was being viewed on an iPhone or something else.)

TYPE ATTRIBUTE
When setting up several dif erent types of audio sources to be sure that all HTML5-
compatible browsers will play it, you can enhance the process by adding the type attribute
to the <source> tag. h e information in the type attribute tells the browser whether it
should even attempt to load the i le. For example, the following snippet shows the format:

< source src = 'mists.ogg' type = 'audio/ogg' >

h e reason for including a type attribute is to save time. h e interpreter in the browser looks
at the line and realizes that the type indicates that it can either play it or not. If not, it doesn't
even bother trying. For example, suppose you were given a choice of taking two tests — one
in HTML5 and the other in quantum physics. Unless you have a background in quantum
physics, you're not going to waste your time trying. However, knowing that a test will be in
HTML5, you feel like you can give it a shot. It's the same with the type attribute. If it sees the
type and determines, “I can't play that,” it doesn't try.