Three independently ugly bugs that all fed the same log flood:
* Electron's `WebFrameMain.send` writes every "Render frame was disposed"
to stderr via `console.error`. When the worker fans a second
agent-event past a reloading renderer, we produced thousands of
identical lines and stalled the main loop on stderr I/O. Added a
`mainFrame.detached` guard so the send is short-circuited before
Electron's own catch block fires, and installed a targeted filter in
`suppress-warnings.ts` (now actually imported from the entry point)
so the specific `console.error("Error sending from webFrameMain:"…)`
noise never reaches the terminal. Any other payload still surfaces.
* `dispatchAgentMessage` accepted the human-reader sentinel as a wake
target when an agent replied to `__board__` — `wakeAgentIfPossible`
then called `db.getAgent("__board__")`, threw, and the dispatcher
kept repeating on every send. Strip `HUMAN_SENDER_ID` at
`resolveMessageWakeTargets`, and keep a defense-in-depth guard in the
heartbeat so a stray caller (future automation fan-out) cannot
reintroduce the crash.
* Pi's skills loader rejects any SKILL.md whose frontmatter `name`
diverges from its parent directory. The four bundled `my-writing-style`
copies declared `name: writing-style-skill`, so every install emitted
a warning and dropped the skill. They also lived as orphan gitlinks
(mode 160000 without .gitmodules), and the global `*.md` gitignore
hid every other SKILL.md from version control. Fixed the frontmatter
to match the dir, converted the dangling submodules to plain trees,
and allowlisted `builtin-skills/**/*.md` so a fresh clone carries the
catalogue instead of silently losing it.
3.5 KiB
name, description, metadata
| name | description | metadata | ||
|---|---|---|---|---|
| audio | Using audio and sound in Remotion - importing, trimming, volume, speed, pitch |
|
Using audio in Remotion
Prerequisites
First, the @remotion/media package needs to be installed. If it is not installed, use the following command:
npx remotion add @remotion/media
Importing Audio
Use <Audio> from @remotion/media to add audio to your composition.
import { Audio } from "@remotion/media";
import { staticFile } from "remotion";
export const MyComposition = () => {
return <Audio src={staticFile("audio.mp3")} />;
};
Remote URLs are also supported:
<Audio src="https://remotion.media/audio.mp3" />
By default, audio plays from the start, at full volume and full length.
Multiple audio tracks can be layered by adding multiple <Audio> components.
Trimming
Use trimBefore and trimAfter to remove portions of the audio. Values are in frames.
const { fps } = useVideoConfig();
return (
<Audio
src={staticFile("audio.mp3")}
trimBefore={2 * fps} // Skip the first 2 seconds
trimAfter={10 * fps} // End at the 10 second mark
/>
);
The audio still starts playing at the beginning of the composition - only the specified portion is played.
Delaying
Wrap the audio in a <Sequence> to delay when it starts:
import { Sequence, staticFile } from "remotion";
import { Audio } from "@remotion/media";
const { fps } = useVideoConfig();
return (
<Sequence from={1 * fps}>
<Audio src={staticFile("audio.mp3")} />
</Sequence>
);
The audio will start playing after 1 second.
Volume
Set a static volume (0 to 1):
<Audio src={staticFile("audio.mp3")} volume={0.5} />
Or use a callback for dynamic volume based on the current frame:
import { interpolate } from "remotion";
const { fps } = useVideoConfig();
return (
<Audio
src={staticFile("audio.mp3")}
volume={(f) =>
interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
}
/>
);
The value of f starts at 0 when the audio begins to play, not the composition frame.
Muting
Use muted to silence the audio. It can be set dynamically:
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
return (
<Audio
src={staticFile("audio.mp3")}
muted={frame >= 2 * fps && frame <= 4 * fps} // Mute between 2s and 4s
/>
);
Speed
Use playbackRate to change the playback speed:
<Audio src={staticFile("audio.mp3")} playbackRate={2} /> {/* 2x speed */}
<Audio src={staticFile("audio.mp3")} playbackRate={0.5} /> {/* Half speed */}
Reverse playback is not supported.
Looping
Use loop to loop the audio indefinitely:
<Audio src={staticFile("audio.mp3")} loop />
Use loopVolumeCurveBehavior to control how the frame count behaves when looping:
"repeat": Frame count resets to 0 each loop (default)"extend": Frame count continues incrementing
<Audio
src={staticFile("audio.mp3")}
loop
loopVolumeCurveBehavior="extend"
volume={(f) => interpolate(f, [0, 300], [1, 0])} // Fade out over multiple loops
/>
Pitch
Use toneFrequency to adjust the pitch without affecting speed. Values range from 0.01 to 2:
<Audio
src={staticFile("audio.mp3")}
toneFrequency={1.5} // Higher pitch
/>
<Audio
src={staticFile("audio.mp3")}
toneFrequency={0.8} // Lower pitch
/>
Pitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the <Player />.