Audio layers
$.addAudio() adds an invisible layer that only contributes to the final mix. Trim, offset, fade, and duck volume just like any animatable prop.
const $ = new VideoFlow({ width: 512, height: 512, fps: 30, backgroundColor: '#0a0d18' });
// Audio is invisible — the visible label just signals "the music is playing".
const music = $.addAudio(
{ volume: 0.6 },
{ source: 'https://videoflow.dev/samples/sample.mp3' },
);
music.fadeIn('500ms');
const label = $.addText(
{ text: '\u266a Music playing', fontSize: 4.5, fontWeight: 700, color: '#4ecdc4' },
{
transitionIn: { transition: 'fade', duration: '500ms' },
transitionOut: { transition: 'fade', duration: '400ms' },
},
);
$.wait('3s');
label.remove();
music.fadeOut('500ms');
music.remove();
return $;const music = $.addAudio(
{ volume: 0.6 },
{ source: '/audio/bed.mp3', sourceStart: '10s' },
);
music.fadeIn('1s');
// Duck under a VO
music.animate({ volume: 0.6 }, { volume: 0.18 }, { duration: '500ms', wait: false });
const vo = $.addAudio(
{ volume: 1 },
{ source: '/audio/vo.wav' },
);
$.wait('4s');
music.animate({ volume: 0.18 }, { volume: 0.6 }, { duration: '500ms' });
music.fadeOut('2s');Properties
| Prop | Default | Notes |
|---|---|---|
source (setting) | — | MP3, WAV, OGG, M4A, FLAC. |
volume | 1 | 0–1 (or higher to amplify). Animatable. |
pan | 0 | −1 (full left) → 1 (full right). Animatable. |
pitch | 1 | Pitch multiplier. 2 = one octave up, 0.5 = down. Animatable. |
mute | false | Silence without changing volume. Not animatable. |
sourceStart / sourceEnd (settings) | Source-media seconds. | |
.fadeIn() / .fadeOut() (methods) | Shortcut for volume keyframes. | |
speed | 1 | Playback rate. |