HTML and CSS Reference
In-Depth Information
say so that you can click/tap a button to hear the pronunciation of each term. We'll
use the <audio> element to embed the sound bytes, and JavaScript to control the audio
playback. Example 3-1 shows the HTML for our glossary, which defines a few terms
ebook publishers will likely be familiar with; <audio> elements are highlighted in bold .
Example 3-1. Audio-enabled glossary HTML
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>Digital Publishing Mini-Glossary</title>
<script src="modernizr-1.6.min.js"></script>
<script src="glossary.js"></script>
<style media="screen" type="text/css">
dl {
width: 400px;
dt {
padding-top: 10px;
padding-bottom: 5px;
font-style: italic;
color: red;
dd {
margin-left: 1.5em;
.play-button {
font-style: normal;
color: blue;
padding: 3px;
border:2px solid;
border-color: black;
background-color: gray;
dt .play-button {
margin-left: 6px;
<h1>Digital Publishing Mini-Glossary</h1>
<p>Click the <span class="play-button">&#x25b6;</span> button to hear the
pronunciation of a term</p>
<!--Audio content -->
<audio id="epub">
<source src="audio/epub.wav" type="audio/wav"/>
<source src="audio/epub.mp3" type="audio/mp3"/>
<source src="audio/epub.ogg" type="audio/ogg"/>
<em>(Sorry, &lt;audio&gt; element not supported in your
Search WWH ::

Custom Search