generating-sounds-with-ai
Audit Web Audio API code for sound synthesis best practices. Use when reviewing procedural audio, implementing UI sounds, or checking audio parameter quality. Outputs file:line findings.
- License 许可
- MIT
- 最近更新
- 2026-05-29
- Stars
- ★ 0
- Forks
- 0
01 前言 Front Matter
- name
- generating-sounds-with-ai
- license
- MIT
- metadata
- { "author": "raphael-salaja", "source": "/content/generating-sounds-with-ai/index.mdx", "version": "2.0.0" }
- description
- Audit Web Audio API code for sound synthesis best practices. Use when reviewing procedural audio, implementing UI sounds, or checking audio parameter quality. Outputs file:line findings.
03 SKILL.md 正文
Generating Sounds with AI
Review Web Audio API code for sound synthesis best practices.
How It Works
- Read the specified files (or prompt user for files/pattern)
- Check against all rules below
- Output findings in
file:lineformat
Rule Categories
| Priority | Category | Prefix |
|---|---|---|
| 1 | Context Management | context- |
| 2 | Decay & Envelope | envelope- |
| 3 | Sound Design | design- |
| 4 | Parameters | param- |
Rules
Context Management Rules
context-reuse-single
Reuse a single AudioContext instance; do not create new ones per sound.
Fail:
function playSound() {
const ctx = new AudioContext();
// Creates new context every call
}
Pass:
let audioContext: AudioContext | null = null;
function getAudioContext(): AudioContext {
if (!audioContext) {
audioContext = new AudioContext();
}
return audioContext;
}
context-resume-suspended
Check and resume suspended AudioContext before playing.
Fail:
function playSound() {
const ctx = getAudioContext();
// Plays immediately without checking state
}
Pass:
function playSound() {
const ctx = getAudioContext();
if (ctx.state === "suspended") {
ctx.resume();
}
}
context-cleanup-nodes
Disconnect and clean up audio nodes after playback.
Fail:
source.start();
// Nodes remain connected after sound ends
Pass:
source.start();
source.onended = () => {
source.disconnect();
gain.disconnect();
};
Envelope Rules
envelope-exponential-decay
Use exponential ramps for natural decay, not linear.
Fail:
gain.gain.linearRampToValueAtTime(0, t + 0.05);
Pass:
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
envelope-no-zero-target
Exponential ramps cannot target 0; use 0.001 or similar small value.
Fail:
gain.gain.exponentialRampToValueAtTime(0, t + 0.05);
Pass:
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
envelope-set-initial-value
Set initial value before ramping to avoid glitches.
Fail:
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
// No setValueAtTime before ramp
Pass:
gain.gain.setValueAtTime(0.3, t);
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
Sound Design Rules
design-noise-for-percussion
Use filtered noise for clicks/taps, not oscillators.
Fail:
// Click sound using sine oscillator
const osc = ctx.createOscillator();
osc.type = "sine";
// Results in tonal "beep" not "click"
Pass:
// Click sound using noise burst
const buffer = ctx.createBuffer(1, ctx.sampleRate * 0.008, ctx.sampleRate);
const data = buffer.getChannelData(0);
for (let i = 0; i < data.length; i++) {
data[i] = (Math.random() * 2 - 1) * Math.exp(-i / 50);
}
design-oscillator-for-tonal
Use oscillators with pitch movement for tonal sounds (pops, confirmations).
Fail:
// Confirmation sound using static frequency
osc.frequency.value = 400;
Pass:
// Confirmation sound with pitch sweep
osc.frequency.setValueAtTime(400, t);
osc.frequency.exponentialRampToValueAtTime(600, t + 0.04);
design-filter-for-character
Apply bandpass filter to shape percussive sounds.
Fail:
// Raw noise without filtering
source.connect(gain).connect(ctx.destination);
Pass:
const filter = ctx.createBiquadFilter();
filter.type = "bandpass";
filter.frequency.value = 4000;
filter.Q.value = 3;
source.connect(filter).connect(gain).connect(ctx.destination);
Parameter Rules
param-click-duration
Click/tap sounds should be 5-15ms duration.
Fail:
const buffer = ctx.createBuffer(1, ctx.sampleRate * 0.1, ctx.sampleRate);
// 100ms is too long for a click
Pass:
const buffer = ctx.createBuffer(1, ctx.sampleRate * 0.008, ctx.sampleRate);
// 8ms is appropriate for a click
param-filter-frequency-range
Bandpass filter for clicks should be 3000-6000Hz.
Fail:
filter.frequency.value = 500; // Too low, sounds muffled
Pass:
filter.frequency.value = 4000; // Crisp, present
param-reasonable-gain
Gain values should not exceed 1.0 to prevent clipping.
Fail:
gain.gain.setValueAtTime(1.5, t);
Pass:
gain.gain.setValueAtTime(0.3, t);
param-q-value-range
Filter Q for clicks should be 2-5 for focused but not harsh sound.
Fail:
filter.Q.value = 15; // Too resonant, harsh
Pass:
filter.Q.value = 3; // Focused but natural
Output Format
When reviewing files, output findings as:
file:line - [rule-id] description of issue
Example:
lib/sounds.ts:23 - [envelope-exponential-decay] Using linearRampToValueAtTime instead of exponential
lib/sounds.ts:45 - [context-reuse-single] Creating new AudioContext on each call
Summary Table
After findings, output a summary:
| Rule | Count | Severity |
|---|---|---|
context-reuse-single |
1 | HIGH |
envelope-exponential-decay |
3 | MEDIUM |
param-click-duration |
1 | LOW |
Parameter Translation Table
When user describes issues, translate to parameter changes:
| User Says | Parameter Change |
|---|---|
| "too harsh" | Lower filter frequency, reduce Q |
| "too muffled" | Higher filter frequency |
| "too long" | Shorter duration, faster decay |
| "cuts off abruptly" | Use exponential decay |
| "more mechanical" | Higher Q, faster decay |
| "softer" | Lower gain, triangle wave |
References
04 同仓库更多 Skills
zarr-python
Chunked N-D arrays for cloud storage (Zarr-Python 3). Compressed arrays, parallel I/O, S3/GCS via fsspec, NumPy/Dask/Xarray compatible, for large-scale scientific computing pipelines.
xvary-stock-research
Thesis-driven equity analysis from public SEC EDGAR and market data; /analyze, /score, /compare workflows with bundled Python tools (Claude Code, Cursor, Codex).
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
vercel-react-view-transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.
vercel-react-native-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.