In this series, I have covered how to setup a fixed format ebook, how to add images, how to place text, and how to embed fonts. In this post I’ll go over how add read aloud functionality to your children’s story. I recommend this only for fixed format children’s ebooks, because it can be tedious adding all the extra code (and children’s books are nice and short).
Instead of using Sigil, I also recommend using a text editor. Since I use a Mac, I downloaded the free editor TextWrangler.
The first thing you need to do is record your audio. Use an audio recording and editing software such as Audacity (free) to make your audio file. For this post I named my audio file “narration.”
Next, you need to create a new type of file for each page, called a SMIL file. Note: Once you’ve created all your new files, you can add them to Sigil, under the Miscellaneous folder (except the audio file, which goes under audio). Each SMIL file will contain the following code:
<par id=”id#“> <text src=”…/page#.html#p1“/><audio clipBegin=”timehere” clipEnd=”timehere” src=”…/audio/narration.m4a“/></par>
Everything in red will need to be changed to convey the information in your book. Below is an example of how to implement the code for a specific page:
The code in the SMIL file basically breaks up each word in the audio file, so that each word can be highlighted as it is spoken.
Next, you will need to add some code to each HTML file that displays words. The code around each word should look like this (anything highlighted in red will need to be changed):
<span id=”p1“>Word</span>
Here is an example of what an entire HTML page would look like:
Now for the fun part. In your CSS stylesheet, you can choose which color the text should change to as it’s highlighted. I believe the default color is blue, but you can change it to whatever you’d like. Here is some code that will change the highlighted words to red:
Last, you will need to add all this information to your OPF file, or else your epub will not validate and none of this will work.
In the example above, I added some space in between file types. However this is not necessary; I added it to make it easier to see the differences. What is important to note is the addition of the media-overlay information to each HTML/XHTML page that contains audio.
Next post, I’ll go over how to magnify text hotspots for Kindle fixed format ebooks.
