Creating A Read Aloud Story Book
A Read Aloud Story Book
A “Read Aloud” story book is book with a “Narration” audio track and text “Highlighting”. As the story is narrated the text is highlighted in sync with the audio. Below is a video example of a “Read Aloud” story book. This book was created in “Easy ePub Code Editor” and is viewed in “iBooks” on the “iPad”.
In this tutorial we will be adding ”Read Aloud Text Highlighting” to a “Fixed Layout” epub optimized for viewing in iBooks on the iPad.
To create “Read Aloud Text Highlighting” we need the following ingredients.
1/ A xhtml page containing some text to highlight.
2/ A ccs style sheet for text formatting and highlight styling
3/ An audio narration file.
4/ And finally a SMIL file to sync everything together. SMIL = Synchronized Multimedia Integration Language .
Combine these ingredients and mix them into a .epub and you have “Highlighted Text” in “Sync” with your audio.
How Does It Work?
In the page above you can see the word “The” and the corresponding word in the xhtml file below.
The first thing we need to do is to give the word an “id” tag. We do this by wrapping the word in a “span” tag with an “id”. (see image below)
This “id” has a matching “id” in the”smil” file.
In the “smil” file we are identifying the “word” and the “audio file”. We are also identifying the “beginning” and “end” of the word in the audio file.
Add in some css styling…
And we have ”Read Aloud Text Highlighting” !
So How Do We Do It?
1/ First we need to finalize the text for the page. (If we change the text later everything will need to be redone.)
2/ Using the text as a script and some audio software, record your audio narration file. The audio file needs to be in Apple MPEG-4 (.m4a) format, AAC at 256kbps in stereo.
3/ Next we need to create an “Audio Timing Label File”. The timing file contains the start point and end point of all the words on the page. (see image below)
Watch the video below to see how to create an “Audio Timing Label File” using “Audacity”. Audacity is a free audio editing app available for Mac, Windows and other platforms.
Creating an Audio Timing File
We now have everything necessary to create ”Read Aloud Text Highlighting” on the page.
Using Easy ePub Code Editor To Auto Generate “smil” and “xhtml” Code
Step One:
Using iTunes “File Sharing” import the “Audio File” and the “Timing Label File” into “Easy ePub Code Editor.
Please Note: The “Audio File” and the “Timing Label File” must have the same name. e.g. titlepage.m4a / titlepage.txt
Step Two:
Open “Easy ePub Code Editor”, select your book project, go to the page you want to add “Read Aloud Text Highlighting” to and add the text to the page using the “Text Editor”.
Use the “css editor” to position and style the text or use a “saved” style from the “styles manager.
Step Three:
1/ Open the “Add Page Item” menu.
2/ Tap the “Narration” button.
3/ Select the “Audio File” for the page.
Thats it! Everything else is done automatically!
We can now go to the “File Manager” and check the “smil file”.
Adding Highlight Style
In the “css” style sheet you will find new “media-overlay” tags. Use this to change the highlight color.
So What Just Happened?
When you select an “Audio File” the app scans the document directory for a matching “Timing Label File”. The information from the “Timing Label File” and “Text input” from the text editor is used to auto generate the “smil file”. At the same time the “xhtml file” code is modified. The “audio” and “smil” files are added to the books resource folder. The “opf” package file is also updated with information about the new “audio” and “smil” files. Finally “css” style tags are added for the “Text Highlighting”.
Getting Help
If you are having any problems or if you have any questions please contact support@futurejones.com