Deep Dive: Binary MIDI Parsing & Real-Time Lyrics
This sandbox demonstrates advanced client-side audio engineering by combining the SpessaSynth rendering engine with a custom-built, sub-millisecond binary MIDI parser. Unlike standard audio players, MIDI files do not contain pre-rendered sound waves; they contain a stream of hexadecimal instructions.
1. The SpessaSynth AudioWorklet
To ensure high-performance playback without stuttering, the entire audio synthesis engine runs inside an AudioWorklet. This API isolates audio rendering to a dedicated CPU thread. As the WebAudio Context advances, it instructs the Worklet to read notes, apply SoundFont (.sf2) samples, and generate the physical audio buffer in real-time.
2. Extracting Lyrics from Binary (Meta Events)
Karaoke files (like `.kar`) are fundamentally just standard `.mid` files with specific Meta Events injected into the tracks. Our custom JavaScript parser reads the raw ArrayBuffer of the file and scans for:
- Status Byte
0xFF: Identifies a Meta Event. - Type
0x01or0x05: Identifies Text or Lyric data. - Variable-Length Quantity (VLQ): We decode the VLQ delta-time to determine exactly when the syllable should appear in relation to the overall song tempo.
3. Smooth Visual Interpolation
Most basic players highlight entire words at once. This engine uses the tempo map generated during the binary scan to calculate the exact duration of each syllable. Inside the requestAnimationFrame loop, we calculate the inverse duration of the note and apply a high-performance CSS width transformation to the syllable's .fill layer. This results in the "butter-smooth" color sweep characteristic of professional karaoke machines, all perfectly synced to the AudioContext.currentTime hardware clock.
4. Client-Side Guarantee (BYOC)
Because the heavy lifting of parsing binary data and synthesizing audio is done via your local browser's APIs (WebAudio, HTML5 Canvas, FileReader), your files are completely private. Operating on a strict Bring Your Own Content (BYOC) policy, your `.mid` and `.sf2` files are never uploaded, buffered, or transmitted to external servers.