audio video for Publishers - HTML5 for Publishers - page 34

browser/ereader.)</em>
</audio>
<audio id="mobi">
<source src="audio/mobi.wav" type="audio/wav"/>
<source src="audio/mobi.mp3" type="audio/mp3"/>
<source src="audio/mobi.ogg" type="audio/ogg"/>
</audio>
<audio id="pdf">
<source src="audio/pdf.wav" type="audio/wav"/>
<source src="audio/pdf.mp3" type="audio/mp3"/>
<source src="audio/pdf.ogg" type="audio/ogg"/>
</audio>
<div class="glossary">
<dl>
<dt>EPUB <input type="submit" class="play-button" id="epub_button" value="&#x25b6;"/></dt>
<dd>An open standard for reflowable ebook content created and maintained by the <a
href="http://idpf.org/">International Digital Publishing Forum
(IDPF)</a> based on HTML, CSS, and XML technologies. Version 3.0 of
EPUB will support HTML5.</dd>
<dt>Mobipocket <input type="submit" class="play-button" id="mobi_button" value="&#x25b6;"/
></dt>
<dd>A proprietary standard for reflowable ebook content developed by <a
href="http://en.wikipedia.org/wiki/Mobipocket">Mobipocket SA</a>,
and used by Amazon on its hardware and software Kindle
platforms.</dd>
<dt>Portable Document Format (PDF) <input type="submit" class="play-button"
id="pdf_button" value="&#x25b6;"/></dt>
<dd>An open standard for page-based (non-reflowable) electronic documents created by Adobe
Systems
that has been in use since the 1990s. Many ereader devices support
PDF files, as well as EPUB or Mobi.</dd>
</dl>
</div>
</body>
</html>
Each glossary term is followed by an <input> button styled with CSS to resemble a play
button. Figure 3-1 shows the glossary displayed in iBooks for iPad.
Next, we'll write some JavaScript that initiates the audio playback when one of the
<input> buttons is clicked. Example 3-2 shows the code.
Example 3-2. Glossary JavaScript
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
if (audio_support()) {
set_up_audio();
}
}
function audio_support () {
return Modernizr.audio;
}