generating-sounds-with-ai▌
raphaelsalaja/userinterface-wiki · updated Apr 8, 2026
Review Web Audio API code for sound synthesis best practices.
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
Discussion
Product Hunt–style comments (not star reviews)- No comments yet — start the thread.
Ratings
4.7★★★★★46 reviews- ★★★★★Sofia Srinivasan· Dec 28, 2024
We added generating-sounds-with-ai from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
- ★★★★★Shikha Mishra· Dec 20, 2024
generating-sounds-with-ai fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
- ★★★★★Olivia Okafor· Dec 20, 2024
generating-sounds-with-ai is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
- ★★★★★Mateo Dixit· Dec 4, 2024
generating-sounds-with-ai reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Li Sharma· Nov 23, 2024
I recommend generating-sounds-with-ai for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
- ★★★★★Anaya Menon· Nov 11, 2024
Solid pick for teams standardizing on skills: generating-sounds-with-ai is focused, and the summary matches what you get after install.
- ★★★★★Mateo Taylor· Oct 14, 2024
Useful defaults in generating-sounds-with-ai — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- ★★★★★Noah Nasser· Oct 2, 2024
generating-sounds-with-ai has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Oshnikdeep· Sep 25, 2024
generating-sounds-with-ai is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
- ★★★★★Sakura Martinez· Sep 25, 2024
We added generating-sounds-with-ai from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
showing 1-10 of 46