T. Nayak

Learning Technologies ,Technic and just sharing…

Creating Read Aloud Content epub in Fixed Layout


Tips for Creating Read Aloud Content Using Media Overlays 1.2


Overview                                                                                   5

Revision History                                                                                            5

Tips for Creating Read Aloud Content for iBooks               6

About the Read Aloud Feature User Interface                                            6

Tools for Creating Read Aloud Content for iBooks                                   6

Media Overlays Structure                                                                             6

SMIL File Example                                                                                                         7

HTML File Example                                                                                                        7

Working with Audio in Media Overlays                                                      7

Marking Start and End Times in Audio Files                                        7

How to Mark the Start and End times In an Audio File Using Audacity                      8

Pages Without Audio                                                                               9

CSS Styling of Media Overlays                                                                    10

CSS Example                                                                                                                   10

Ambient Soundtrack                                                                                    10

Ambient Soundtrack Example                                                                                        10

Embedding Read Aloud Controls                                                                10

iBooks Namespace                                                                                                          10

Embedded Controls Example                                                                                         11

Styling Read Aloud Controls                                                                       11

Adding an SMIL File and Audio File to an EPUB                                     11

Manifest Example              11


iBooks syncs text and audio using Media Overlays, an EPUB-specific subset of Synchronized Multimedia Integration Language (SMIL). This document provides information about Media Overlays SMIL files and tips for using Media Overlays to create iBooks Read-Aloud content.

Revision History

■ May 16, 2011 – Version 1.0 First version of document.

■ May 17, 2011 – Version 1.0v4 Updated CSS Styling of Media Overlays.

■ June 01, 2011 – Version 1.1 Updated.

■ June 02, 2011 – Version 1.1 Additional clean-up edits.

Tips for Creating Read Aloud Content for iBooks

About the Read Aloud Feature User Interface

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.

Tools for Creating Read Aloud Content for iBooks

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

Note: This document has instructions for marking start times and end times in an audio file using Audacity, a free, cross-platform audio editing tool. You can use another audio editing tool to mark start and end times in an audio file. Steps for marking start and end times in an audio file will vary depending on the tool you are using.

Media Overlays Structure

The Media Overlays is used to associate an audio file, or a portion of an audio file, to a phrase of corresponding text that is identified using a standard HTML id attribute. The portion of the audio file and HTML id attribute are associated in a SMIL document using the <par> element which contains the <text> and <audio> elements. Both the <text> and <audio> elements contain a required src attribute. The src attribute used in the <text> element uses a URL with a fragment identifier to point to the identified text phrase.  The src attribute used in the <audio> element is a URL to the audio file. While the <text> element granularity is defined by the fragment identifier, the <audio> element’s granularity is defined by the attributes, clipBegin and clipEnd.

SMIL File Example

<?xml version=”1.0″ encoding=”UTF-8″?>

<smil xmlns=”http://www.w3.org/ns/SMIL” version=”3.0″



<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


<span id=”word0″>Shall</span> <span id=”word1″>I</span>

<span id=”word2″>compare</span> <span id=”word3″>thee</span>

<span id=”word4″>to</span> <span id=”word5″>a</span>

<span id=”word6″>summer’s</span> <span id=”word7″>day?</span>



■ All <par> elements must follow the narrative order of the book. (For example, <par id=”par2”> must follow <par id=”par1”>)

■ 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.

Working with Audio in Media Overlays

Marking Start and End Times in Audio Files

Narrative audio can be one long audio file or a series of clips. An audio editing tool can be used to mark the start and end time of a word or text phrase within an audio file, making it easier to define in an SMIL file.

Note: The following instructions show how to mark start and end times in an audio file using Audacity, a free, cross-platform audio editing tool. You can use another audio file tool to mark the start and end times in an audio file, however steps to do this will vary depending on the audio editing tool used.

How to Mark the Start and End times In an Audio File Using Audacity

  1. 1.      Import the audio file.
  2. 2.      Move the cursor to the desired start time.
  3. 3.      Type Command-B to add a label to the cursor location.
  4. 4.      Name the label using a naming convention with no spaces.
  5. 5.      In the label track, drag the the right-side handle of the newly added marker to the end time. The label now represents a span, marking both the start and end time of a phrase.
  6. 6.      To export one or more labels, go to File > Export Labels and save the labels as a text document.

Final audio files should be encoded following the standard iBooks audio encoding guidelines. Audio tracks should be in stereo. Use iTunes to encode as an AAC/MP4 at 256 kbps.

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.

  1. 1.      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.
  2. 2.       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 a <par> that 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;


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=”http://www.idpf.org/2007/ops“.

Ambient Soundtrack Example

<html xmlns=”http://www.w3.org/1999/xhtml


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


If you have a single soundtrack that is intended for the entire book, include the same audio file in every xhtml document.

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 <html>

iBooks Namespace


Embedded Controls Example

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

“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”


<item id=”audio1″ href=”page1.smil” media-type=”application/smil+xml”/>

<item id=”narrat” href=”audio/page1.m4a” media-type=”audio/mpeg”/>



12 responses to “Creating Read Aloud Content epub in Fixed Layout

  1. Gandhi Kumar February 14, 2012 at 4:14 am

    Please explain with sample codes in smil, html, css and the iBook overlay above them.

  2. shri February 16, 2012 at 6:49 am

    Am not cleared… I tired it but not working clearly..

  3. Beatriz Sena March 30, 2012 at 3:01 pm

    you have any document up and running? I would like to see a complete code and see it in action.

  4. i.s. April 9, 2012 at 2:22 am

    hello Tofan,
    thanks for this article, I found it really helpful for a lot of things (though not complete for an ignoramus like me…), in my attempt to use this new feature of epub-3 (media overlays). It seems that there’s no place to learn this stuff in a practical, hands-on manner yet.
    Do you know if running a text (with the attached reading sound file) can run a chosen translation in parallel too?

    Thanks a lot & friendly regards!

  5. Sivakumar M. February 26, 2013 at 1:02 pm

    Could you please give the sample file for reflowable epub read aloud.

  6. Pratik April 29, 2013 at 12:53 pm

    This seems a best indetailed solution provided…
    I was looking for this for 2-3 hours.

    Thanks a Lotttttttttttt

  7. support May 12, 2013 at 6:56 am

    Hi Tofan,
    you can create a read aloud epub file using the online application SMIL for EPUB (http://www.xldir.com). Right now this app is in beta testing. If you will try it, then use the tester coupon code A4z817 (valid until June 30, 2013)

  8. Dilip Kumar May 29, 2013 at 5:43 am

    Does Nook, Kobo and KF-8 Supports Read aloud e-Pubs.

  9. Pingback: Blank Book — The Fixed-Layout ePUB Template – Jason Mervyn Hibbs

  10. www.google.ca July 22, 2014 at 7:34 am

    Good blog you’ve got here.. It’s difficult to find
    quality writing like yours these days. I seriously appreciate individuals
    like you! Take care!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: