Open Source Library/Demo

Sync Audio With Lexical

A specialized open-source project showcasing how to map audio timestamps to specific text nodes within the Lexical rich text editor. This allows for 'karaoke-style' reading experiences where text is highlighted in real-time as the audio plays.

01 / Project Links

Project Links

View on GitHub

02 / Role & Responsibilities

Role & Responsibilities

Role

Lead Developer

Key Responsibilities

  • Developed the logic for timestamp mapping between audio files and Lexical JSON
  • Created a high-performance highlighting system for large text bodies
  • Documented the implementation for other developers to integrate into LMS platforms

03 / Technical Details

Technical Details

Technology Stack

frontend
  • React
  • Next.js
  • Lexical
backend
    database
      devops
      • GitHub Actions
      tools
      • TypeScript

      Architecture

      Client-side mapping engine for real-time DOM manipulation based on audio state

      04 / Screenshots & Media

      Screenshots & Media

      05 / Challenges & Solutions

      Challenges & Solutions

      Challenge

      Highlighting specific words within a deeply nested JSON structure without performance lag

      Solution

      Implemented an index-based lookup system that avoids re-scanning the entire document on every time update

      06 / Achievements & Impact

      Achievements & Impact

      Open Source Release

      Provided a foundational tool for developers building accessible reading applications

      07 / Lessons Learned

      Lessons Learned

      • Deep dive into Lexical's internal node structure
      • Efficient state management for high-frequency updates

      Explore more projects?

      Go To Projects