Cuelogic Blog Icon
Cuelogic Career Icon
Home > Blog > All > Creating Read Aloud Content for ePub

Creating Read Aloud Content for ePub

Read Aloud books are absolutely perfect for children’s story books. Hey, but but don’t stop there think about the possibilities of language instruction where your readers can see the words highlighted as the speaker pronounces them (and click on them to repeat as many times as necessary) or perhaps you’d like to publish a play or poetry and include a dramatic reading. Image a travel book in which you can narrate the photographs. The list is endless !

Read aloud

About the Read Aloud Feature User Interface in iBook

Books that have the Read Aloud feature have an audio button in the top toolbar. Tapping the audio button opens a popover with a volume slider, a Turn Pages option menu, and a Start Reading/Stop Reading button. Reading begins on the current page and text will highlight as the audio is read. If automatic page turn is on, the page turns after the audio content on the page finishes playing.

you would definately like to look at sample video !

Creating Read Aloud Content for ePub

To create Read Aloud content for iBooks, you will need:

  • A fixed-layout EPUB
  • A narrative audio file
  • An audio editing tool for marking times within an audio file

Creating SMIL files for e-books

What is SMIL, never heard about this before?

Unfortunately SMIL it is a bit old (SMIL 3.0 was released in 2008) and the Internet has moved on.

SMIL means Synchronized Multimedia Integration Language. It is an XML language that allows timing, layout, animations, transitions and other things to be scripted and executed by software / IoT Application or reading device that understands SMIL XML.

Everything SMIL can do (and more) is now done more easily with JavaScript, with ubiquitous browser support available.

We will need any audio editing tool for marking start times and end times in an audio. There are many tools available but after doing lot of research I feel that Audacity is best suitable for me.

Audacity is the well known, premier, open source audio editing application. It is relatively easy to learn to use for basic operations.

The main reason for using this application for SMIL production is to create an Audacity label.txt file. This lets you set and fine-tune the text highlight synchronization points to the millisecond.

Checkout the video provided below, its shows how to generate label text file.

Adobe Soundbooth vs Audacity

reasons some people switching from audacity to audition and why you shouldnt

SMIL file example:

<smil xmlns="" version="3.0"profile="">
        <par id="par1">
        <text src="page1.xhtml#word1"/>
        <audio src="audio/page1.m4a" clipBegin="5s" clipEnd="15s" />
        <par id="par2">
        <text src="page1.xhtml#word2"/>
        <audio src="audio/page1.m4a" clipBegin="15s" clipEnd="25s" />

HTML file example:

compare thee summer’s day?

Please keep these three points in your mind

  • Allelements must follow the narrative order of the book. (For example,must follow)
  • Media Overlays granularity is as detailed or broad as the content-creator defines it. For children’s books, word-by-word granularity is ideal, but text id attributes could also be defined at a sentence or paragraph level.
  • Create one SMIL document per XHTML document.

Pages Without Audio

iBooks has two default zoom levels in each orientation: page and spread. When a user is zoomed into a page, each page is focused independently during navigation. When a user is zoomed to a spread, the spread is treated as a single step during book navigation.

iBooks has two default zoom levels in each orientation: page and spread. When a user is zoomed into a page, each page is focused independently during navigation. When a user is zoomed to a spread, the spread is treated as a single step during book navigation.

  • If “Turn Pages” is set to “Automatically,” iBooks will pause reading for 3 seconds on any pages or spreads that do not have any associated audio. After 3 seconds, reading will continue, and the user will be taken to the next page or spread.
  • If “Turn Pages” is set to “Manually,” iBooks will take the user to pages or spreads with no audio, and the corner of the page will immediately be turned up, indicating to the user that it is time for them to turn the page.

To override this behavior and skip the spread entirely, provide athat corresponds to the skipped spread, and define a duration of 0s. If a pause longer than 3 seconds is desired, that time must be built into the audio file.

CSS Styling of Media Overlays

The currently-playing content will highlight as it is read aloud. iBooks has a default highlight, but the book may specify its own style by using the CSS pseudo class, -epub-media-overlay-active. This pseudo class can be used to add highlighting, outlining and other indications that the content is active.

CSS Example:

.-epub-media-overlay-active {

color: #ffffff;
border-bottom: 4px solid #48d;

Ambient Soundtrack

To include an ambient soundtrack in your book, include an audio element with and attribute of epub:type=”ibooks:soundtrack” and include the namespace xmlns:epub=” “.

<audio epub:type="ibooks:soundtrack" src="audio/sonata14.m4a" />

Embedding Read Aloud Controls

If a book contains Media Overlays, the Read Aloud controls will automatically appear in the iBooks toolbar. However, you may also embed Start, Stop and Pause controls in the content of the book by including the iBooks Read Aloud function. If you include this attribute, you must also include the iBooks namespace in

Embedded Controls Example

Read Aloud

“start”, which starts readaloud “stop”, which stops readaloud “startstop”, which plays readaloud if stopped, or stops readaloud if played. Styling Read Aloud Controls Use .-ibooks-media-overlay-enabled to style “startstop” element depending on the current state. html #mybutton { /* style when readaloud is stopped */ color: green; } html.-ibooks-media-overlay-enabled #mybutton { /* style when readaloud is playing */ color: red; }

Adding an SMIL File and Audio File to an EPUB

SMIL documents and audio files must be included in the manifest of the OPF.

Manifest Example

<item id="page1" href="page1.xhtml" media-type="application/xhtml+xml" media-overlay="mo-page1"/>
<item id="audio1" href="page1.smil" media-type="application/smil+xml"/>
<item id="narrat" href="audio/page1.m4a" media-type="audio/mpeg"/>

Download — Blank Book v1.00 by Jason Hibbs