LingoLyrics

Inspiration

We noticed that learning American Sign Language (ASL) can be challenging, especially with the limited engaging resources available. Music is something that brings people together, so we wanted to create a fun and interactive way to help people learn ASL through songs.

What We Learned

Syncing visuals with audio – We explored JavaScript’s timeupdate event to ensure ASL signs appeared at the right moments in a song.
Dynamic DOM updates – Instead of constantly replacing elements, which caused lag, we found better ways to update the ASL visuals efficiently.
Performance optimization – We learned that too many changes at once can slow things down, so we fine-tuned our approach to make everything run smoothly.

How We Built It

HTML & CSS – Structured the audio player and ASL display area.
JavaScript –
- Created an array to store lyrics, timestamps, and matching ASL GIFs.
- Used audio.addEventListener("timeupdate", updateGifs) to switch signs at the right time.
- Optimized GIF updates to reduce unnecessary changes and improve performance.

Challenges We Faced

Getting the GIFs to sync perfectly with the lyrics took a lot of fine-tuning.
Frequent updates caused lag, so we adjusted our approach to minimize unnecessary changes.
Some GIFs were misaligned or too large, so we dynamically adjusted their size and placement for a better user experience.