Prerequisites
Sound effects must first be added to the remotion.media repository. The source of truth is generate.ts in that repo. A sound effect must exist there before it can be added to @remotion/sfx .
Sound effects must be:
-
WAV format
-
CC0 (Creative Commons 0) licensed
-
Normalized to peak at -3dB
Steps
- Add to remotion.media repo (must be done first)
In the remotion-dev/remotion.media repo:
-
Add the WAV file to the root of the repo
-
Add an entry to the soundEffects array in generate.ts : { fileName: "my-sound.wav", attribution: "Description by Author -- https://source-url -- License: Creative Commons 0", },
-
Run bun generate.ts to copy it to files/ and regenerate variants.json
-
Deploy
- Add the export to packages/sfx/src/index.ts
Use camelCase for the variable name. Avoid JavaScript reserved words (e.g. use uiSwitch not switch ).
export const mySound = 'https://remotion.media/my-sound.wav';
- Create a doc page at packages/docs/docs/sfx/<name>.mdx
Follow the pattern of existing pages (e.g. whip.mdx ). Include:
-
Frontmatter with image , title (camelCase export name), crumb: '@remotion/sfx'
-
<AvailableFrom> tag with the next release version
-
<PlayButton> import and usage
-
Description
-
Example code using @remotion/media 's <Audio> component
-
Value section with the URL in a fenced code block
-
Duration section (fetch the file and use afinfo on macOS to get duration/format)
-
Attribution section with source link and license
-
See also section linking to related sound effects
- Register in sidebar and table of contents
-
packages/docs/sidebars.ts — add 'sfx/<name>' to the @remotion/sfx category items
-
packages/docs/docs/sfx/table-of-contents.tsx — add a <TOCItem> with a <PlayButton size={32}>
- Update the skills rule file
Add the new URL to the list in packages/skills/skills/remotion/rules/sfx.md .
- Build
cd packages/sfx && bun run make
Naming conventions
File name Export name
my-sound.wav
mySound
switch.wav
uiSwitch (reserved word)
page-turn.wav
pageTurn
Version
Use the current version from packages/core/src/version.ts . For docs <AvailableFrom> , increment the patch version by 1.