Audio and sync
Choose music, measure its beats and lock the picture to them, add a voiceover with text to speech, and time captions to the words.
Sound is what makes a code video feel finished. Put picture and sound on one clock: measure the music's beats instead of guessing them, cut on downbeats, and in narrated videos let the voice set the timing. Mix the music under the voice and master to -14 LUFS. Opus cannot listen, so you check every ending and loop point by ear.
Choose the music
Licensed track
Use a track you have the rights to, and write its license into the brief or the project README. In HyperFrames, the media-use skill can search the HeyGen catalog (10,000+ tracks) for background music and a sound effect library (19 bundled files plus the catalog). It needs the heygen CLI signed in for the free allowance.
Generated track
Creators use ElevenLabs music, Lyria and Suno. Licenses differ by plan; check them on Audio before you publish. Music models ignore the requested length, so detect the beat grid and cut or loop the track at phrase boundaries rather than fading it out mid bar (elie2222).
Music written in code
Opus 5.5 can write the score itself, in Python, in a Node script or with Web Audio inside the page. It is popular because the music shares the timeline with the picture, so every hit lands where it should. One creator locked "every cut, tap and impact" to the beat grid this way (mirze_mehdi). Quality is mixed, and the agent "can't listen", so play every ending and loop point yourself.
Tempo by mood
| Feel | BPM |
|---|---|
| Regal, cinematic | 60 to 80 |
| Smooth | 90 to 110 |
| Kinetic, "elite" | 115 to 123 |
| Hype | Above 123 |
These bands come from one widely copied framework (amritwt, single source). The same framework names the common mistake: too many effects and unnecessary sound effects. When unsure, start around 120 BPM.
Sync animation to the beat
Measure the beats
HyperFrames' /music-to-video workflow runs a beat analyzer that writes audiomap.json: energy phases, onsets, silences, hard stops, phrases and tempo. Its BPM and beats are reliable only when the music is clearly rhythmic, so cut calm tracks by phrase instead. In an existing project, npx hyperframes beats writes a beat grid for the music track that Studio can show.
Map the film onto the grid
Cuts on downbeats, UI hits on beats, the hero reveal on the drop. Open with a hook in the first 2 seconds and show something new every 2 to 4 seconds. If the film ends mid bar, end on the next downbeat or trim the outro.
Use one clock for picture and sound
Drive the visuals and the sound effects from the same timeline data: "at 3.5s whoosh, at 4.0s impact" (eapyk). Place each effect by its peak, not by the start of its file. One creator lands "every mechanical hit exactly 1 frame after visual contact" (0xvette).
Beat arithmetic: one beat lasts 60 divided by the BPM, and a 4/4 bar is four beats.
| BPM | One beat | One bar (4/4) | 16 seconds is about |
|---|---|---|---|
| 90 | 0.67 s | 2.67 s | 6 bars |
| 96 | 0.625 s | 2.5 s | 6.4 bars |
| 118 | 0.51 s | 2.03 s | 7.9 bars |
| 120 | 0.5 s | 2 s | 8 bars |
Audio reactive visuals
Optional. The HyperFrames creative skill extracts frequency bands from the track ahead of time and samples them per frame. Keep text pulses to 3 to 6% of scale. The same skill forbids equalizer bars, spectrum analyzers and strobing on the beat.
Voiceover
The voice is the clock
In a narrated video, "the narration never waits for the visuals". Elements land on their spoken cues, and after text to speech runs, each scene's length is corrected to the real voice length: "real duration wins". One creator extracted ElevenLabs word timestamps so that "every text, every logo appears exactly when that word is said" (Aykutuces).
Plan about 2.5 words per second of narration. HyperFrames' docs use about 130 words per minute for a verbatim script.
Text to speech options in HyperFrames
| Engine | When HyperFrames uses it |
|---|---|
| HeyGen Starfish | First choice, if you configured it |
| ElevenLabs | Next, if its API key is set |
| Kokoro | Fallback; runs locally, free, no key |
| Gemini TTS | Only when you ask for it |
Kokoro voices the docs suggest: af_heart or af_nova for product demos, am_adam or bf_emma for tutorials. HyperFrames Studio also has HeyGen Voice built in. For Vietnamese voices and voice plans, see Audio.
Directing the read
- Describe the read in the brief: "warm, unhurried female narration of the quoted script".
- Make 2 to 3 takes per line and keep the best.
- Ask the script writer to avoid what one creator calls "Claudisms like short punchy sentences and a lot of numbers", and to "narrate like a university professor" (deedydas).
- Write numbers the way they should be spoken: "1.9T USD" becomes "nearly two trillion dollars".
Mix levels
| Setting | Value |
|---|---|
| Music under narration | About -18 dB, with about 12 dB of ducking |
| Final loudness | -14 LUFS integrated |
| True peak | -1 dBTP or lower |
HyperFrames' voiceover carve cuts only the frequency bands the voice uses instead of ducking the whole music bed. Group the narration clips and carve the bed against the group. Note the wording: "no narration" removes only the voice; write "no audio at all" when you want silence.
Sound effects
Use one subtle effect per meaningful event, in key with the music and ducked under it. Cue each effect to a moment on the timeline; do not scatter them. Too many effects is one of the most common mistakes.
Caption timing
Captions are built from word level timestamps.
- A generated voiceover comes with timestamps.
- For existing audio or footage, HyperFrames transcribes with Parakeet by default (6.05% word error rate versus 7.44% for whisper.cpp, and 5 to 10 times faster), with whisper.cpp as the fallback.
hyperframes init --audioor--videotranscribes on import. - Remotion has a
/remotion-captionsskill.
Rules for timing and placement:
- Burn captions into the video for muted autoplay, and ship a
.srtor.vttfile too. - Let each caption settle at least 0.4 seconds before the click or action it describes.
- Hold on screen text about 0.3 seconds per word after it settles.
- Keep captions in the safe zone. In 9:16, place them above the bottom 15%.
npx hyperframes check --caption-zone x0/y0/x1/y1flags text that overlaps your caption band. - Use one caption track in Studio.
Caption accuracy is a strength: one user reported "not a single word misunderstanding" with Opus 5.5 and HyperFrames captions (reyzostyle). For caption size and platform safe zones, see Finishing.
Sources
- HyperFrames: Media and audio, Product launch, skills installed with the plugin (
music-to-video,hyperframes-audio,media-use,hyperframes-cli,hyperframes-creative) - Remotion skills
- Posts on X linked inline; music in code examples also from kimmonismus and daniel_haida