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">
<head>
<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-radius:6px;
border-color: black;
background-color: gray;
}
dt .play-button {
margin-left: 6px;
}
</style>
</head>
<body>
<h1>Digital Publishing Mini-Glossary</h1>
<p>Click the <span class="play-button">▶</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, <audio> element not supported in your
