Build a Text to Audio Animated Mini Project | Frontend Coding Challenge | JavaScript | CSS | Web Animations

In this question, you need to build a web app where text should be highlighted and synced with background audio.

Often companies in their machine coding rounds ask questions related to text-to-audio syncing. This question is a good way to practice that functionality and think beyond your regular problem-solving questions.

Checkout what you need to build here.

You can also see the live demo using this link.

Specifications

• The appropriate word/phrase should be highlighted as they are spoken in the audio.
• Use gradient to highlight words. Feel free to use any gradient.
• Words should be properly synced and the whole experience should be immersive and seamless.

Resources

• Audio: https://yomeshgupta.com/crazy-ones-audio.mp3
• Data: https://yomeshgupta.com/crazy-ones-data.json

Submissions

Start the timer, use the file management system on the left to write modular code, implement every functionality, and share it on LinkedIn & Twitter and tag @devtoolstech @yomeshgupta