epubjs
Version:
Render ePub documents in the browser, across many devices
65 lines (63 loc) • 4.86 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/section[1]" /><link rel="prev" href="./ch03s02_4.html" /><link rel="next" href="./ch03s02_6.html" /></head><body>
<aside class="note" title="Note" data-origPath="/html/body/section/section[1]/aside[1]">
<h3 class="title">Note</h3>
<p>The real-world experience I describe here comes from the creation of DAISY
talking books, to be clear. Tools for the similar production of EPUB 3
overlays will undoubtedly appear in time, as well, but as of writing are in
short supply.</p>
</aside>
<p data-origPath="/html/body/section/section[1]/p[23]">Ultimately, the only advice that can be given is to strive for the finest
granularity you can. Paragraphs may be easier to synchronize than sentences, but
if the viewing screen isn’t large enough to view the entire paragraph the
invisible part won’t ever come into view as the narration plays (the reading
system can only know to resynch at the next point; it can’t intrinsically know
that narration has to match what is on screen or have any way to determine what
is on screen at any given time).</p>
<p data-origPath="/html/body/section/section[1]/p[24]">We’re not completely done yet, though. There are a few quick details to run
through in order to now include this overlay in our EPUB.</p>
<aside class="note" title="Note" data-origPath="/html/body/section/section[1]/aside[2]">
<h3 class="title">Note</h3>
<p>The following instructions assume a basic level of familiarity with EPUB
publication files. Refer to the <a class="ulink" href="http://idpf.org/epub/30/spec/epub30-publications.html" target="_top">EPUB Publications 3.0 specification</a> for more
information.</p>
</aside>
<p data-origPath="/html/body/section/section[1]/p[25]">Assuming we’ve saved our overlay as <em>chapter_001_overlay.smil</em>, the first
step is simply to include an entry in the manifest:</p>
<pre class="screen" data-origPath="/html/body/section/section[1]/pre[8]"><item
id="chapter_001_overlay"
href="chapter_001_overlay.smil"
media-type="application/smil+xml"/></pre>
<p data-origPath="/html/body/section/section[1]/p[26]">We then need to include a <code class="literal">media-overlay</code> attribute on
the manifest item for the corresponding content document for chapter one:</p>
<pre class="screen" data-origPath="/html/body/section/section[1]/pre[9]"><item
id="xchapter_001"
href="chapter_001.xhtml"
media-type="application/xhtml+xml"
media-overlay="chapter_001_overlay"/></pre>
<p data-origPath="/html/body/section/section[1]/p[27]">The value of this attribute is the id we created for the overlay in the previous
step.</p>
<p data-origPath="/html/body/section/section[1]/p[28]">And finally we need to add metadata to the publication file indicating the total
length of the audio for each individual overlay and for the publication as a
whole. For completeness, we’ll also include the name of the narrator.</p>
<pre class="screen" data-origPath="/html/body/section/section[1]/pre[10]"><meta property="media:duration" refines="#chapter_001_overlay">0:14:43</meta>
…
<meta property="media:duration">0:23:46</meta>
<meta property="media:narrator">Stuart Wills</meta></pre>
<p data-origPath="/html/body/section/section[1]/p[29]">The <code class="literal">refines</code> attribute on the first <code class="literal">meta</code> element specifies the id of the manifest item we
created for the overlay, as this is how we match the time value up to the
content file it belongs to. The lack of a <code class="literal">refines</code>
attribute on the next duration <code class="literal">meta</code> element
indicates it contains the total time for the publication (only one can omit the
<code class="literal">refines</code> attribute).</p>
<p data-origPath="/html/body/section/section[1]/p[30]">There’s one final metadata item left to add and then we’re done:</p>
<pre class="screen" data-origPath="/html/body/section/section[1]/pre[11]"><meta property="media:active-class">-epub-media-overlay-active</meta></pre>
<p data-origPath="/html/body/section/section[1]/p[31]">This special <code class="literal">media:active-class</code> meta property tells
the reading system which CSS class to apply to the active element when the audio
narration is being played (i.e., the highlighting to give it).</p>
</body>
</html>