Embedding Read Aloud Controls

If a book contains Media Overlays, the read aloud controls automatically appear in the Apple Books toolbar. However, you may also embed Start, Stop, and toggle controls in the content of the book by including the readaloud attribute. If you include this attribute, you must also include the ibooks namespace and prefix in <html>.

Prefix

epub:prefix="ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0"

Note: In the prefix example above, the space between ibooks: and http:// is important; it needs to be a single, regular space character and not a return, non-breaking space, or any other kind of whitespace.

Embedded Controls Example

<p ibooks:readaloud="startstop">Read Aloud</p>

The following attributes are supported:

"start", which starts readaloud

"stop", which stops readaloud

"startstop", which plays readaloud if stopped, or stops readaloud if playing.

Defining the Page Turn Style

You can define the Page Turn Style of the embedded read aloud controls. The page turn style can be automatic or manual. These two values function the same as if the reader selected Automatic or Manual page turn directly from the Read Aloud menu.

Example:

<p ibooks:readaloud="startstop" ibooks:readaloud-turn-style="automatic">Automatic</p><p ibooks:readaloud="startstop" ibooks:readaloud-turn-style="manual">Manual</p>

Controlling Narration with Read Aloud Books

By default, if a Read Aloud book includes audio or video files in addition to the read aloud narration, the media will play in parallel with read aloud. You can control the read aloud behavior with a few simple changes.

To control read aloud behavior, make sure the namespace is set to http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/"; this is typically done on the document's HTML tag.

When a user interacts with the media elements, the narration will pause while the media plays; narration will resume when the media is finished playing.

The following examples show how to use the pause-readaloud attribute with static media elements:

<video src="video/H264-640x480.m4v" ibooks:pause-readaloud="true" controls="controls" poster="images/posterimage.jpg"/>
<audio src="audio/loop.m4a" ibooks:pause-readaloud="true" controls="controls"/>

The following examples show how to use the pause-readaloud attribute using the Apple Books JS library:

<div class="ibooks-media-audio" data-ibooks-audio-src="audio/loop.m4a" data-ibooks-pause-readaloud="true">Audio</div>

Additionally, when using Apple Books JS including data-ibooks-audio-reset-on-play and setting it to "true" will force the media element to play from the beginning each time the user triggers it.

Using this attribute requires Apple Books 1.5 or later.