IPhone and iPad
I’ve now added read-along audio to the ‘list of things I can do’. Specifically fixed format ePub for IOS devices with an audio track that highlights each word.
I can’t show you a sample because I’ve been working on copyrighted material. Maybe one day I’ll get around to making something, but the first thing I learned about the process is that it’s time consuming – oh so very time consuming.
You will need:
- One fixed-format ePub
- One or more audio tracks saved in .m4a format
- A .smil file for every page that contains text
Method:
1. First you need to mark the start and end point of every word in the audio. (I split my audio into one file for each page – you can use just one I think, but I haven’t tried it) Apple apparently recommends that you use a program called Audacity – which is handy because I already have it. But it is free anyway and easy to use. You will have to find the start and end point of each word by creating a selection, listening and fine-tuning it until it’s right. Then you press cmd b to create a label – you don’t have to write anything in the little box that comes up (I just did it to draw your attention to it).
When you have marked every word you can export the labels to a text file. When you open the text file all the start and end points of the label, and hence the word, are there in a list.
This will take some time. I’m sure some clever person has or will shortly automate this process, but until then there is nothing for it but to sit and listen … over and over again.
Marking the audio timings
2. Next you will need to create your .smil files. Below is a sample showing just three words. This is where you add your timings you made earlier (they don’t have to be in red though!).
<smil xmlns="http://www.w3.org/ns/SMIL" xmlns:epub="http://www.idpf.org/2007/ops" version="3.0"> <body> <par id="par1"> <text src="6-page6.xhtml#W1"/> <audio src="audio/audio3.m4a" clipBegin="0.000000s" clipEnd="0.632985s"/> </par> <par id="par2"> <text src="6-page6.xhtml#W2"/> <audio src="audio/audio3.m4a" clipBegin="0.632985s" clipEnd="0.964874s"/> </par> <par id="par3"> <text src="6-page6.xhtml#W3"/> <audio src="audio/audio3.m4a" clipBegin="0.964874s" clipEnd="1.214646s"/> </par> </body> </smil>
3. Next you need to mark up your html. Each word is wrapped in a span with the id corresponding to the text source number in the .smil file. For this short example you’d end up with a paragraph that looked like this.
<p><span id="W1">The </span> <span id="W2">Cat</span> <span id="W3">sat</span></p>
4. Next you need to update your content.opf file.
Remember to list all your audio and .smil files in the manifest and give them a unique id.
Then in the entry for the html files with audio you must remember to add:
media-overlay=”ID of corresponding .smil file”. This is really important – if you don’t do this properly it won’t work.
5. Then go into the css file and add this.
}
.-epub-media-overlay-active{
color: red;
This is saying to highlight the words in red (but it can be any colour you like).
6. Finally zip your ePub file back up again and test it out. If you have got everything right you should see a speaker icon in the top right of the menu bar, and if you’ve got everything absolutely right you will be able to have your file read to you and turn the pages automatically or manually. (Have you got the volume turned up?)
So then you’ve got everything right and you try to validate it. And find it won’t validate – yep that’s right – this is quite normal; the validator doesn’t accept media overlays or some such gubbins.
So there you have it. Not a quick snack!
I used Read Aloud ePub for iBooks by Liz Castro as my guide. The section about using GREP to help in the markup was extremely useful.
Three Wishes Books 