generating-sounds-with-ai by raphaelsalaja/userinterface-wiki
npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill generating-sounds-with-ai审查 Web Audio API 代码,以遵循声音合成的最佳实践。
文件:行号 格式输出发现的问题| 优先级 | 类别 | 前缀 |
|---|---|---|
| 1 | 上下文管理 | context- |
| 2 | 衰减与包络 | envelope- |
| 3 | 声音设计 | design- |
| 4 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 参数 |
param- |
context-reuse-single复用单个 AudioContext 实例;不要为每个声音创建新的实例。
失败示例:
function playSound() {
const ctx = new AudioContext();
// 每次调用都创建新的上下文
}
通过示例:
let audioContext: AudioContext | null = null;
function getAudioContext(): AudioContext {
if (!audioContext) {
audioContext = new AudioContext();
}
return audioContext;
}
context-resume-suspended在播放前检查并恢复挂起的 AudioContext。
失败示例:
function playSound() {
const ctx = getAudioContext();
// 未检查状态立即播放
}
通过示例:
function playSound() {
const ctx = getAudioContext();
if (ctx.state === "suspended") {
ctx.resume();
}
}
context-cleanup-nodes播放结束后断开连接并清理音频节点。
失败示例:
source.start();
// 声音结束后节点仍保持连接
通过示例:
source.start();
source.onended = () => {
source.disconnect();
gain.disconnect();
};
envelope-exponential-decay使用指数型渐变实现自然衰减,而非线性渐变。
失败示例:
gain.gain.linearRampToValueAtTime(0, t + 0.05);
通过示例:
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
envelope-no-zero-target指数型渐变不能以 0 为目标值;请使用 0.001 或类似的小值。
失败示例:
gain.gain.exponentialRampToValueAtTime(0, t + 0.05);
通过示例:
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
envelope-set-initial-value在开始渐变前设置初始值,以避免出现杂音。
失败示例:
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
// 渐变前没有调用 setValueAtTime
通过示例:
gain.gain.setValueAtTime(0.3, t);
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
design-noise-for-percussion使用经过滤波的噪声来产生咔哒声/敲击声,而非振荡器。
失败示例:
// 使用正弦波振荡器产生咔哒声
const osc = ctx.createOscillator();
osc.type = "sine";
// 结果是音调性的"哔"声,而非"咔哒"声
通过示例:
// 使用噪声脉冲产生咔哒声
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使用带有音高变化的振荡器来产生音调性声音(如弹出音、确认音)。
失败示例:
// 使用固定频率产生确认音
osc.frequency.value = 400;
通过示例:
// 带有音高扫频的确认音
osc.frequency.setValueAtTime(400, t);
osc.frequency.exponentialRampToValueAtTime(600, t + 0.04);
design-filter-for-character应用带通滤波器来塑造打击乐声音的特性。
失败示例:
// 未经滤波的原始噪声
source.connect(gain).connect(ctx.destination);
通过示例:
const filter = ctx.createBiquadFilter();
filter.type = "bandpass";
filter.frequency.value = 4000;
filter.Q.value = 3;
source.connect(filter).connect(gain).connect(ctx.destination);
param-click-duration咔哒声/敲击声的持续时间应为 5-15 毫秒。
失败示例:
const buffer = ctx.createBuffer(1, ctx.sampleRate * 0.1, ctx.sampleRate);
// 100 毫秒对于咔哒声来说太长了
通过示例:
const buffer = ctx.createBuffer(1, ctx.sampleRate * 0.008, ctx.sampleRate);
// 8 毫秒对于咔哒声是合适的
param-filter-frequency-range用于咔哒声的带通滤波器频率应在 3000-6000Hz 范围内。
失败示例:
filter.frequency.value = 500; // 太低,听起来沉闷
通过示例:
filter.frequency.value = 4000; // 清脆,清晰
param-reasonable-gain增益值不应超过 1.0,以防止削波。
失败示例:
gain.gain.setValueAtTime(1.5, t);
通过示例:
gain.gain.setValueAtTime(0.3, t);
param-q-value-range用于咔哒声的滤波器 Q 值应在 2-5 之间,以获得集中但不刺耳的声音。
失败示例:
filter.Q.value = 15; // 共振过强,刺耳
通过示例:
filter.Q.value = 3; // 集中但自然
审查文件时,按以下格式输出发现的问题:
文件:行号 - [规则ID] 问题描述
示例:
lib/sounds.ts:23 - [envelope-exponential-decay] 使用了 linearRampToValueAtTime 而不是 exponential
lib/sounds.ts:45 - [context-reuse-single] 每次调用都创建新的 AudioContext
在问题列表后,输出一个汇总:
| 规则 | 数量 | 严重程度 |
|---|---|---|
context-reuse-single | 1 | 高 |
envelope-exponential-decay | 3 | 中 |
param-click-duration | 1 | 低 |
当用户描述问题时,将其转换为参数调整:
| 用户描述 | 参数调整 |
|---|---|
| "太刺耳" | 降低滤波器频率,减小 Q 值 |
| "太沉闷" | 提高滤波器频率 |
| "太长" | 缩短持续时间,加快衰减 |
| "突然切断" | 使用指数衰减 |
| "更机械" | 提高 Q 值,加快衰减 |
| "更柔和" | 降低增益,使用三角波 |
每周安装量
177
代码仓库
GitHub 星标数
633
首次出现
2026年1月28日
安全审计
安装于
opencode153
codex142
cursor140
gemini-cli138
github-copilot128
claude-code116
Review Web Audio API code for sound synthesis best practices.
file:line format| Priority | Category | Prefix |
|---|---|---|
| 1 | Context Management | context- |
| 2 | Decay & Envelope | envelope- |
| 3 | Sound Design | design- |
| 4 | Parameters | param- |
context-reuse-singleReuse 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-suspendedCheck 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-nodesDisconnect 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-exponential-decayUse 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-targetExponential 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-valueSet 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);
design-noise-for-percussionUse 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-tonalUse 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-characterApply 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);
param-click-durationClick/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-rangeBandpass 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-gainGain 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-rangeFilter 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
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
After findings, output a summary:
| Rule | Count | Severity |
|---|---|---|
context-reuse-single | 1 | HIGH |
envelope-exponential-decay | 3 | MEDIUM |
param-click-duration | 1 | LOW |
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 |
Weekly Installs
177
Repository
GitHub Stars
633
First Seen
Jan 28, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode153
codex142
cursor140
gemini-cli138
github-copilot128
claude-code116
对话音频生成工具:使用Dia TTS创建逼真多说话人对话,支持情感控制和节奏调整
7,600 周安装
生产代码审计工具:自动扫描修复安全、性能、架构问题,让代码达到企业级标准
509 周安装
设计交接规范生成器 - 自动创建开发文档,提升设计到开发协作效率
528 周安装
Three.js 3D Web开发教程 - WebGL/WebGPU图形编程、动画与性能优化指南
516 周安装
Vercel React 最佳实践:45条Next.js性能优化规则,提升应用加载速度与渲染效率
514 周安装
Seedance 2.0 提示词设计器:AI视频生成提示词优化工具,多模态素材转结构化提示
520 周安装
每日热榜聚合查询工具 - 支持54个平台热榜数据抓取与历史记录
517 周安装