epubjs
Version:
Render ePub documents in the browser, across many devices
59 lines (56 loc) • 4.49 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tell It Like It Is: Text-to-Speech (TTS)</title>
<link rel="stylesheet" type="text/css" href="css/epub.css" />
<link rel="stylesheet" media="speech" href="css/synth.css" />
<link rel="pronunciation" href="lexicon/en.pls" type="application/pls+xml" hreflang="en" />
<link rel="pronunciation" href="lexicon/fr.pls" type="application/pls+xml" hreflang="fr" />
<meta name="dat-origPath" value="/html/body/section/section[2]" /><link rel="prev" href="./ch03s03_5.html" /><link rel="next" href="./ch03s03_7.html" /></head><body>
<p data-origPath="/html/body/section/section[2]/p[7]">And the problems are rarely one-time occurrences. When the reader figures out
what the engine was trying to say they will, in all likelihood, have to make a
mental note on how to translate the synthetic gunk each time it is
re-encountered to avoid repeatedly going through the same process. If you don’t
think that makes reading comprehension a headache, try it sometime.</p>
<p data-origPath="/html/body/section/section[2]/p[8]">But this is where the Synthetic Speech Markup Language (SSML) comes in, allowing
you to define individual pronunciations at the markup level. EPUB 3 adds the
<code class="literal">ssml:alphabet</code> and <code class="literal">ssml:ph</code> attributes, which allow you to specify the alphabet you’re
using and phonemic pronunciation of the containing element’s content,
respectively. These attributes work in very much the same way as the PLS entries
we just reviewed, as you might already suspect.</p>
<p data-origPath="/html/body/section/section[2]/p[9]">For example, we could revise our earlier example as follows to ensure the proper
pronunciation for each use of bass:</p>
<pre class="screen" data-origPath="/html/body/section/section[2]/pre[2]"><p>
The guitarist was playing a
<span ssml:alphabet="x-sampa" ssml:ph="beIs">bass</span> that was shaped
like a <span ssml:alphabet="x-sampa" ssml:ph="b&amp;s"><span ssml:ph="b&s">bass</span></span>.
</p></pre>
<p data-origPath="/html/body/section/section[2]/p[10]">The <code class="literal">ssml:alphabet</code> attribute on each span element
identifies that the pronunciation carried in the <code class="literal">ssml:ph</code> attribute is written in X-SAMPA, identically to the PLS
<code class="literal">alphabet</code> attribute. We don’t need a grapheme to
match against, because we’re telling the synthetic speech engine to replace the
content of the <code class="literal">span</code> element. The engine will now
voice the provided pronunciations instead of applying its own rules. In other
words, no more ambiguity and no more rendering problem; it really is that
simple.</p>
<aside class="note" title="Note" data-origPath="/html/body/section/section[2]/aside[1]">
<h3 class="title">Note</h3>
<p>The second <code class="literal">ssml:ph</code> attribute includes an
&amp; entity as the actual X-SAMPA spelling is: <span class="spell">b&s</span>. Ampersands are
special characters in XHTML that denote the start of a character entity, so
have to be converted to entities themselves in order for your document to be
valid. When passed to the synthetic speech engine, however, the entity will
be converted back to the ampersand character. (In other words, the extra
characters to encode the character will not affect the rendering.)</p>
<p>Single and double quote characters in X-SAMPA representations would similarly
need to be escaped depending on the characters you use to enclose the
attribute value.</p>
</aside>
<p data-origPath="/html/body/section/section[2]/p[11]">It bears a quick note that the pronunciation in the <code class="literal">ssml:ph</code> attribute has to match the prose contained in the element it
is attached to. By wrapping <code class="literal">span</code> elements around
each individual word in this example, I’ve limited the translation of text to
phonetic code to just the problematic words I want to fix. If I put the
attribute on the parent <code class="literal">p</code> element, I’d have to
transcode the entire sentence.</p>
</body>
</html>