add-sfx
This skill simplifies the complex process of adding new sound effects to the @remotion/sfx library. It guides developers through preparing sound effect files, integrating code, generating documentation, and updating versions. This ensures that sound effects comply with format, licensing, and naming conventions, efficiently expanding the audio resources available for Remotion projects.
npx skills add https://github.com/remotion-dev/remotion --skill add-sfxBefore / After Comparison
1 组Before this skill, developers had to manually handle sound effect file format conversion, license verification, code export, documentation writing, and registration across multiple files. This process was time-consuming and error-prone, especially when dealing with numerous sound effects, leading to low efficiency and inconsistent quality.
This skill automates and standardizes the sound effect integration process, providing clear guidance from file preparation to final deployment. This skill ensures that sound effects meet all technical and legal requirements, significantly reducing manual effort and errors, and greatly improving the efficiency and quality of expanding the sound effect library.
Prerequisites
Sound effects must first be added to the remotion.media package.
Then it can be deployed using bun run build. The .env may be missing if we are in a worktree, but on the main non-worktree branch it should be present.
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
1. 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
soundEffectsarray ingenerate.ts:{ fileName: "my-sound.wav", attribution: "Description by Author -- https://source-url -- License: Creative Commons 0", }, - Run
bun generate.tsto copy it tofiles/and regeneratevariants.json - Deploy
2. 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';
3. 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
afinfoon macOS to get duration/format) - Attribution section with source link and license
- See also section linking to related sound effects
4. Register in sidebar and table of contents
packages/docs/sidebars.ts— add'sfx/<name>'to the@remotion/sfxcategory itemspackages/docs/docs/sfx/table-of-contents.tsx— add a<TOCItem>with a<PlayButton size={32}>
5. Update the skills rule file
Add the new URL to the list in packages/skills/skills/remotion/rules/sfx.md.
6. 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.
User Reviews (0)
Write a Review
No reviews yet
Statistics
User Rating
Rate this Skill