How akashksankar/kineticlyrics works
This is a browser-based lyric-timing studio: users provide audio and lyrics, the app parses the lyrics and analyzes the audio, then generates an editable word-level timeline for synchronized playback and JSON export. The sampled code supports the main processing and editor flow; the README is empty, and some component implementations are unsampled, so their internal wiring is represented only where the app-level workflow is evident.
Main entry points: App.tsx App Orchestrator · UploadStudio.tsx Upload Studio · TimelineEditor.tsx Timeline Editor · PlayerControls.tsx Player Controls
Components 16
Studio Workflow
- App Orchestrator
src/App.tsx - Upload Studio
src/components/UploadStudio.tsx - Demo Song Data
src/data/demoSong.ts - Processing View
src/components/ProcessingView.tsx
Audio And Alignment
- Lyric Parser
src/utils/lyricParser.ts - Audio Engine
src/engine/audioEngine.ts - Alignment Engine
src/engine/alignmentEngine.ts
Edit And Playback
- Timeline Editor
src/components/TimelineEditor.tsx - Lyric Stage
src/components/LyricStage.tsx - Audio Visualizer
src/components/AudioVisualizer.tsx - Player Controls
src/components/PlayerControls.tsx
Timeline Model
- Timeline Types
src/types/timeline.ts - Timeline Utilities
src/utils/timelineUtils.ts
Other components
- User
- Browser Audio
- JSON Export
Connections 24
- User → Upload Studio: provides inputs
- App Orchestrator → Upload Studio: renders
- Upload Studio → Lyric Parser: parses lyrics
- Upload Studio → Audio Engine: reads duration
- Upload Studio → App Orchestrator: submits inputs
- App Orchestrator → Audio Engine: decodes audio
- App Orchestrator → Lyric Parser: parses demo lyrics
- App Orchestrator → Demo Song Data: loads demo
- App Orchestrator → Alignment Engine: generates timeline
- Alignment Engine → Lyric Parser: uses layout selection
- Audio Engine → Browser Audio: decodes and analyzes
- App Orchestrator → Processing View: shows progress
- App Orchestrator → Timeline Editor: renders editor
- Timeline Editor → Timeline Utilities: formats time
- App Orchestrator → Lyric Stage: renders playback
- App Orchestrator → Audio Visualizer: renders visualization
- App Orchestrator → Player Controls: renders controls
- Player Controls → App Orchestrator: seeks and toggles
- Timeline Editor → App Orchestrator: launches playback
- App Orchestrator → Timeline Utilities: exports timeline
- Timeline Utilities → JSON Export: downloads JSON
- App Orchestrator → Timeline Types: holds timeline data
- Timeline Editor → Timeline Types: edits timeline
- Player Controls → Timeline Types: reads lyric sections