Developer Guide

GlassSync is a Single-Page Application (SPA) built with Vanilla JavaScript, HTML5, and CSS3. It requires no build tools, npm, or backend servers.

Core Technologies

Web Audio API: Used for decoding audio data to generate the visualization.
HTML5 Canvas: Renders the waveform visualization efficiently.
requestAnimationFrame: Handles the smooth scrolling of the Karaoke Preview and scrubber updates (60fps).
CSS Variables: Manages the glassmorphism theme (--glass-bg, --accent-color).

The logic is contained within the <script> tag in index.html.

audio: The HTML5 Audio object.
lyrics: An array of objects containing { id, text, start, end }.
waveformData: The normalized array of audio peaks used for drawing the canvas.

generateWaveform(buffer): Decodes the MP3 array buffer, downsamples the PCM data to ~1200 bars, and normalizes the height for the canvas.
previewLoop(): The recursive animation loop that handles the Preview Mode scrolling and highlighting.
renderSyncUI(): Dynamically rebuilds the DOM elements for the lyric list based on the lyrics array (used after loading or deleting lines).

To change the color scheme, look for the :root variables at the top of the <style> block:

:root {
    --accent-color: #0a84ff;  /* Main Action Color */
    --active-line-bg: rgba(10, 132, 255, 0.6); /* Highlight Color */
}