Syncing sound with transcript gsap

[Volt 22]

Hello everyone,

How can I achieve the effect on this webpage - https://www.beyond-beauty.co/story/the-revolution-of-desire? Where the sound syncs with the transcript, and the opacity of the words change as they are said.

 

I know I'll need SplitText to highlight the words individually, but how can I sync the sound to the words that have been said?

 

Thank you.

[mvaneijgen]

I looked at it, but it didn't really seem to sync to the text fully.

 

If I wanted to do this, I just would check how many words there are and check how long the audio file is. Then set the words showing up to audio in seconds / words = show word ever x amount e.g 60 seconds of audio / 20 words = show word every 3 seconds

 

And  there is probably a async function to check if the audio is loaded and playing, so you should probably connect them to each other to only animate GSAP if the audio is playing. 

[iDad5]

If you want to sync it precisely to the words, you could work with TexTrackCues that you would have to measure out and right down upfront. 
 

if there audio is distinctly pronounced with clear pauses between the words you could even try to determine them by parsing the actual ByteArray of the sound, but that’s likely overkill. 

[GreenSock]

Yep, or just literally build an Array of timestamps when each word should be highlighted/animated and plug that into the position parameter in a timeline that you build. That's likely the most bulletproof and accurate way, but involves prep time. 

[Volt 22]

Thanks guys, 

I'll incorporate your suggestions and try to make a demo. I'll revert if I stumbled upon any issues.

Thanks again.