How Does It Work?

cover1

In the page above you can see the word “The” and the corresponding word in the xhtml file below.

xhtmlNoSpan

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)

xhtmlWithSpan

This “id” has a matching “id” in the”smil” file.

smilFile

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…

Screen-shot-2012-06-16-at-2.40.10-PM1

And we have “Read Aloud Text Highlighting” !

Next – Part 2