---
id: gh-add-sfx
name: "add-sfx"
url: https://skills.yangsir.net/skill/gh-add-sfx
author: remotion-dev
domain: multimedia
tags: ["audio-processing", "sound-effects", "remotion", "developer-tools", "content-creation"]
install_count: 2500
rating: 4.30 (120 reviews)
github: https://github.com/remotion-dev/remotion/tree/main/.agents/skills/add-sfx
---

# add-sfx

> 此技能旨在简化向 @remotion/sfx 库添加新音效的复杂流程。它指导开发者完成音效文件准备、代码集成、文档生成及版本更新等一系列步骤，确保音效符合格式、授权和命名规范，从而高效扩展 Remotion 项目的音效资源。

**Stats**: 2,500 installs · 4.3/5 (120 reviews)

## Before / After 对比

### 音效集成效率

**Before**:

在没有这个技能之前，开发者需要手动处理音效文件的格式转换、授权检查、代码导出、文档编写以及多处文件注册，整个过程耗时且容易出错，尤其是在处理大量音效时，效率低下且难以保证一致性。

**After**:

该 Skill 自动化并标准化了音效的集成流程，从文件准备到最终发布，每一步都有明确指引。此技能确保了音效符合所有技术和法律要求，显著减少了手动操作和错误，大幅提升了音效库的扩展效率和质量。

| Metric | Before | After | Change |
|---|---|---|---|
| 集成时间 | 120分钟 | 15分钟 | -87.5% |

## Readme

## Prerequisites

Sound effects must first be added to the [remotion.media](./packages/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:

1. Add the WAV file to the root of the repo
2. Add an entry to the `soundEffects` array in `generate.ts`:
   ```ts
   {
     fileName: "my-sound.wav",
     attribution:
       "Description by Author -- https://source-url -- License: Creative Commons 0",
   },
   ```
3. Run `bun generate.ts` to copy it to `files/` and regenerate `variants.json`
4. 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`).

```ts
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 `afinfo` on 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/sfx` category items
- `packages/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

```bash
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.


---
*Source: https://skills.yangsir.net/skill/gh-add-sfx*
*Markdown mirror: https://skills.yangsir.net/api/skill/gh-add-sfx/markdown*