Music video

A music video where the words matter. The picture moves on the beat, the words light up on the voice, and every scene does something different with the lyric. It's one window.renderAt(t) page, so the make-video contract applies; its music reference covers helios analyze, the beat map and the sync rules. This skill adds what a lyric video needs on top of that.

karaoke.html and lyrics.example.json are a tested reference for the mechanics: reading word and syllable timings, lighting each glyph as it's sung, looking lyrics up by content, and making the scene react to a word. Reuse the mechanics; design the look and scenes from the treatment.

Ground rules

• The motion syncs to the beat; the word syncs to the voice. A word lights exactly at its sung start and is fully lit by its end. A line may appear dim up to about 0.4 s early. The highlight never runs ahead of the voice.
• Never fake the timing. A wipe whose speed is computed from the number of letters, or a beat grid from a guessed BPM, drifts off the song within seconds. Get real word times (step 1) and a real beat map (helios analyze).
• Look lyrics up by content, never by hard-coded time. lyric('through the night').words[0].start. Re-timing the lyrics then re-times the whole video.
• Lyrics are usually copyrighted. Use the user's own song and lyrics. Don't commit lyric text to public examples.

1. Get the timings