HTML5 and CSS3, Second Edition

(singke) #1
html5_audio/audio.html
<articleclass="sample">
<header><h2>Drums</h2></header>
<audioid="drums"controls>
<sourcesrc="sounds/ogg/drums.ogg"type="audio/ogg">
<sourcesrc="sounds/mp3/drums.mp3"type="audio/mpeg">
<ahref="sounds/mp3/drums.mp3">Downloaddrums.mp3</a>
</audio>
</article>

<articleclass="sample">
<header><h2>Guitar</h2></header>
<audioid="guitar"controls>
<sourcesrc="sounds/ogg/guitar.ogg" type="audio/ogg">
<sourcesrc="sounds/mp3/guitar.mp3" type="audio/mpeg">
<ahref="sounds/mp3/guitar.mp3">Downloadguitar.mp3</a>
</audio>
</article>

<articleclass="sample">
<header><h2>Organ</h2></header>
<audioid="organ"controls>
<sourcesrc="sounds/ogg/organ.ogg"type="audio/ogg">
<sourcesrc="sounds/mp3/organ.mp3"type="audio/mpeg">
<ahref="sounds/mp3/organ.mp3">Downloadorgan.mp3</a>
</audio>
</article>

<articleclass="sample">
<header><h2>Bass</h2></header>
<audioid="bass"controls>
<sourcesrc="sounds/ogg/bass.ogg"type="audio/ogg">
<sourcesrc="sounds/mp3/bass.mp3"type="audio/mpeg">
<ahref="sounds/mp3/bass.mp3">Downloadbass.mp3</a>
</audio>
</article>
</body>
</html>

When we open the page in an HTML5-compatible browser, each entry in the
list will have its own audio player, like in Figure 21, The audio players in
Chrome, on page 139.

The browser itself handles the playback of the audio when you press the Play
button.

When we open the page in Internet Explorer, the download links show since
the browser doesn’t understand the audio element. This makes for a decent
fallback solution, but let’s see whether we can do better.

Chapter 7. Embedding Audio and Video • 138


Download from Wow! eBook <www.wowebook.com> report erratum • discuss

Free download pdf