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