epub.js
epub.js copied to clipboard
How to highlight words from SMIL file
I'm trying to highlight words from an SMIL file embedded in the epub.
The SMIL file has lines of words to be read aloud and to be highlighted that look like this.
<par id="par3"> <text src="../6.xhtml#_idTextSpan049" /> <audio clipBegin="13.040" clipEnd="14.200" src="../audio/audio.mp3"/> </par>
I'm able to load up the mp3 just fine but I'm trying to highlight the word right now.
From what I gather I have to get the CFI range for that item in the text. I was trying to get the element from the _idTextSpan049 in the xhtml file that it's associated with and calling cfiFromElement but I'm really stuck right now and don't know what to do. I don't know what to call object to call cfiFromElement on.
This feels extremely hard to do a highlight on a word.
book.rendition.hooks.content.register(async (contents, view) => { currentDoc = contents.document;; } ///
/// you should have ../6.xhtml#_idTextSpan049 this data data =' ../6.xhtml#_idTextSpan049' const id = data.split('#')[1]; const elem = currentDoc.getElementById(id); elem.style.color = 'red';