Jump to content

Volt 22

Syncing sound with transcript gsap

Moderator Tag

Recommended Posts

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.

Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

Thanks guys, 

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

Thanks again.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.