epubjs
Version:
Render ePub documents in the browser, across many devices
74 lines (69 loc) • 4.63 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[3]" /><link rel="prev" href="./ch03s03_9.html" /><link rel="next" href="./ch03s03_11.html" /></head><body>
<p data-origPath="/html/body/section/section[3]/p[18]">We could update our previous example to add a 10 millisecond rest after the cue
is sounded to prevent run-ins as follows:</p>
<pre class="screen" data-origPath="/html/body/section/section[3]/pre[8]">h1 {
-epub-pause: 50ms 25ms;
-epub-cue: url('audio/ping.mp3') none;
-epub-rest: 10ms 0ms
}</pre>
<p data-origPath="/html/body/section/section[3]/p[19]">But again, if I didn’t say it forcefully enough earlier, it’s best not to tweak
these properties unless you’re targeting a specific user group, know their
needs, and know that their players will not provide sufficient quality “out of
the box.” Tread lightly, in other words.</p>
<p data-origPath="/html/body/section/section[3]/p[20]">A final property, that is slightly more of an aside, is <code class="literal">voice-family</code>. Although not specifically accessibility related, it
can provide a more flavorful synthesis experience for your readers.</p>
<p data-origPath="/html/body/section/section[3]/p[21]">If your ebook contains dialogue, or the gender of the narrator is important, you
can use this property to specify the appropriate gender voice. We could set a
female narrator as follows:</p>
<pre class="screen" data-origPath="/html/body/section/section[3]/pre[9]">body {
-epub-voice-family: female
}</pre>
<p data-origPath="/html/body/section/section[3]/p[22]">and a male class to use as needed for male characters:</p>
<pre class="screen" data-origPath="/html/body/section/section[3]/pre[10]">.male {
-epub-voice-family: male
}</pre>
<p data-origPath="/html/body/section/section[3]/p[23]">If we added these rules to a copy of Alice’s Adventures in Wonderland, we could
now differentiate the Cheshire Cat using the male voice as follows:</p>
<pre class="screen" data-origPath="/html/body/section/section[3]/pre[11]"><p>
Alice: But I don't want to go among mad people.
</p>
<p class="male">
The Cat: Oh, you can't help that.
We're all mad here. I'm mad. You're mad.
</p></pre>
<p data-origPath="/html/body/section/section[3]/p[24]">You can also specify different voices within the specified gender. For example,
if a reading system had two male voices available, you could add some variety to
the characters as follows by indicating the number of the voice to use:</p>
<pre class="screen" data-origPath="/html/body/section/section[3]/pre[12]">.first-male {
-epub-voice-family: male 1
}
.second-male {
-epub-voice-family: male 2
}</pre>
<p data-origPath="/html/body/section/section[3]/p[25]">At worst, the reading system will ignore your instruction and only present
whatever voice it has available, but this property gives you the ability to be
more creative with your text-to-speech renderings for those systems that do
provide better support.</p>
<aside class="note" title="Note" data-origPath="/html/body/section/section[3]/aside[2]">
<h3 class="title">Note</h3>
<p>The CSS3 Speech module contains more properties than I’ve covered here, but
reading systems are only required to implement the limited set of features
described in this section. You may use the additional properties the module
makes available (e.g., pitch and loudness control), but if you do your
content may not render uniformly across platforms. Carefully consider using
innovative or disruptive features in your content, as this may hinder
interoperability across reading systems.</p>
</aside>
<p data-origPath="/html/body/section/section[3]/p[26]">Whatever properties you decide to add, it is always good practice to separate
them into their own style sheet. You should also define them as applicable only
for synthetic speech playback using a media at-rule as follows:</p>
</body>
</html>