epubjs
Version:
Render ePub documents in the browser, across many devices
52 lines (50 loc) • 3.88 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Talk to Me: Media Overlays</title>
<link rel="stylesheet" type="text/css" href="css/epub.css" />
<meta name="dat-origPath" value="/html/body/section" /><link rel="prev" href="./ch03s02_0.html" /><link rel="next" href="./ch03s02_2.html" /></head><body>
<p data-origPath="/html/body/section/p[7]">But knowing what overlays are and how they can enhance ebooks doesn’t get us any
closer to understanding how they work and the considerations involved in making
them, which is the real goal for this section. If you like to believe in magic,
though, here’s an early warning that by the end it won’t seem all that fantastic how
your reading system makes words and paragraphs highlight as a voice narrates the
text. Prepare to be disappointed that your reading system doesn’t have
superpowers.</p>
<p data-origPath="/html/body/section/p[8]">To begin moving under the hood of an EPUB, though, the first thing to understand is
that overlays are just specialized xml documents that contain the instructions a
reading system uses to synchronize the text display with the audio playback. They’re
expressed using a subset of SMIL that we’ll cover as we move along, combined with
the <code class="literal">epub:type</code> attribute we ran into earlier for
semantic inflection.</p>
<aside class="note" title="Note" data-origPath="/html/body/section/aside[1]">
<h3 class="title">Note</h3>
<p>SMIL (pronounced “smile”) is the shorthand way of referring to the Synchronized
Multimedia Integration Language. For more information on this technology, see <a class="ulink" href="http://www.w3.org/TR/SMIL" target="_top">http://www.w3.org/TR/SMIL</a></p>
</aside>
<p data-origPath="/html/body/section/p[9]">The order of the instructions in the overlay document defines the reading order for
the ebook when in playback mode. A reading system will move through the instructions
one at a time, or a reader can manually navigate in similar fashion to how assistive
technologies enable navigation through the markup (i.e., escaping and skipping).</p>
<p data-origPath="/html/body/section/p[10]">As a reading system encounters each synchronization point, it determines from the
provided information which element in which content file has to be loaded (by its
<code class="literal">id</code>) and the corresponding position in the audio
track at which to start the narration. The reading system will then load and
highlight the word or passage for you at the same time that you hear the audio
start. When the audio track reaches the end point you’ve specified—or the end of the
audio file if you haven’t specified one—the reading system checks the next
synchronization point to see what text and audio to load next.</p>
<p data-origPath="/html/body/section/p[11]">This process of playback and resynchronization continues over and over until you
reach the end of the book, giving the appearance to the reader that their system has
come alive and is guiding them through it.</p>
<aside class="note" title="Note" data-origPath="/html/body/section/aside[2]">
<h3 class="title">Note</h3>
<p>This portrayal is intentionally simple. In practice, overlay synchronization
points may, for example, omit an audio reference when the reading system is
expected to synthetically render the text, or if the text reference points to a
multimedia object like the audio or <code class="literal">video</code> element
that the reading system is expected to initiate. Refer to the Media Overlays
specification for more information on the full range of features.</p>
</aside>
</body>
</html>