Highlight words as audio plays
I'm trying to highlight text on a page as an audio clip of that text is read to the reader.
Any ideas? I found the kitchen sink examples of playing/stopping/etc sound but can't figure out how to sync it with highlighting of text.
2 Answers
-
You could use setInterval to check the current position of the sound ( Sound.getTime ),and based on this to modify the background of the correspondent word ( each word being a label )
Or you could use audioPlayer that has a progress event triggered at 1s intervals.
-
Thanks Tamas, great ideas and I'll keep them in mind. I'm not sure what solution i'll end up using at the moment. Still familiarizing myself with all the sound functionality available.
Right now I just play the sound with a button click and if sound is playing fire a highlight function using setInteval.
Posting my code for the sake of maybe helping others….
function hiText(page) { c = 0; l = page.children[0].children.length; var t = setInterval(function() { page.children[0].children[c].backgroundColor = 'yellow'; c++; // stop when we run out of words if(c>=l) { clearInterval(t); } },[1000]); } page1_play.addEventListener('click', function() { page1_sound.play(); if (page1_sound.isPlaying()) { hiText(page1); } });