The custom-read-aloud plugin is designed as a text and audio synchronization alternative to EPUB Media Overlays. It is inteded for use cases where automatic page-turning is not required.
EPUB Media Overlays 3.1 defines a set of standards for reading systems to provide "enhanced accessibility for any user who has difficulty following the text of a traditional book". Though a valuable accesibility feature for more traditional text-heavy ebooks and children's literature, the specification does not directly address second language learning. Further, vendor implementations vary and provide a less than adequate API for developers of interactive textbooks, who may want to put more control in the reader's hands and can do without the page-turn feature.
This is a purely front-end progressive enhancement approach. It executes after the page is loaded and creates event listeners on the audio element and text to be synced. These listeners add a CSS class to a corresponding markup delimited segment of text as the audio is playing.
To avoid potential conflicts in some reading systems, it should not be used with Media Overlays or within a book that may be utilizing that feature.
How It Works
Link to repo: https://github.com/thephilgray/custom-readaloud-plugin
Link to demo: https://codepen.io/phillipgray/full/bOmeed