我做了一个AI音效生成网站，聊聊技术选型和踩坑经历

做独立开发有一段时间了，最近上线了一个 AI 音效生成平台 aiwave，用户输入一段中文描述就能生成对应的专业音效。这篇文章聊聊整个项目的技术选型、踩过的坑和一些思考，希望对同样在做音频方向的开发者有参考价值。

---

项目是什么

简单说就是一个 Text-to-Sound-Effect 的平台。用户输入类似"暴风雨中远处传来的雷声，伴随雨点打在玻璃窗上"这样的描述，AI 在 3 秒内生成对应的音效文件。除了 AI 生成，还做了一个浏览器内的音效编辑器，支持裁剪、淡入淡出、混响调节等操作。

核心用户群是视频创作者、独立游戏开发者和播客主播——这些人经常需要找特定的音效，传统素材库搜不到就没辙，AI 生成正好解决这个问题。

---

技术栈选型

前后端分离架构：

前端： Next.js 15 + React 19 + TypeScript + Tailwind CSS + shadcn/ui + Zustand

选 Next.js 主要是为了 SSR 和 SEO，音效平台需要被搜索引擎收录。React 19 的 Server Components 在首屏加载上提升明显。状态管理用的 Zustand，比 Redux 轻量太多，音频编辑器的状态逻辑用 Zustand 管理很舒服。

后端： Node.js 20 + Fastify 5 + Prisma 6 + Zod

Fastify 比 Express 快不少，而且原生支持 JSON Schema 校验。Prisma 做 ORM 类型安全很好，配合 Zod 做入参校验基本杜绝了类型问题。

数据库： PostgreSQL 16 + Redis 7

AI 引擎： 音效生成接的是底层 AI 引擎，做了 7 天缓存策略减少重复调用成本。

---

最难的部分：浏览器内音频编辑器

这是项目里花时间最多的模块。基于 Web Audio API 实现，支持以下操作：

• 波形可视化显示
• 音频裁剪（精确到毫秒）
• 多段音轨叠加
• 淡入淡出效果
• 音量调节
• 导出 WAV / MP3 / OGG

踩坑 1：Web Audio API 的 AudioContext 生命周期

浏览器安全策略要求 AudioContext 必须在用户交互（点击/触摸）后才能启动。如果你在页面加载时就创建 AudioContext，Chrome 会把它置于 suspended 状态。

解决方案是延迟创建，在用户第一次点击播放按钮时才初始化：

let audioCtx = null;
function getAudioContext() {
  if (!audioCtx) {
    audioCtx = new AudioContext();
  }
  if (audioCtx.state === 'suspended') {
    audioCtx.resume();
  }
  return audioCtx;
}

踩坑 2：大文件波形渲染性能

直接用 Canvas 画完整波形在长音频（>10秒）时会很卡。最终方案是对音频数据做降采样，把几万个采样点降到 Canvas 像素宽度的 2 倍，渲染性能提升了 10 倍以上。

踩坑 3：音频导出格式

Web Audio API 原生只支持导出 PCM 数据，要输出 MP3 需要用 lamejs 库做编码，OGG 需要 vorbis-encoder。导出过程放在 Web Worker 里跑，避免阻塞主线程。

---

AI 音效生成的提示词工程

接底层 AI 引擎不难，难的是让中文用户的描述能被准确理解。做了一层提示词预处理：

1. 用户输入中文描述
2. 后端用 DeepSeek 做语义增强（≤2轮对话），补充音频专业术语
3. 增强后的描述发给 AI 引擎生成

比如用户输入"老式收音机调台的声音"，经过增强变成更精确的音频描述，生成效果会好很多。

---

缓存策略

AI 生成单次成本不低，所以做了多级缓存：

• Redis 缓存： 相同描述 7 天内直接返回缓存结果
• OSS 存储： 生成的音效文件存阿里云 OSS + CDN 加速
• 前端缓存： 用户最近生成的记录本地缓存

这样同一个描述的音效，第一个用户等 3 秒，后续用户毫秒级返回。

---

和其他方案的对比

做调研时看了不少同类产品：

产品	定位	优势	局限
可灵 AI	AI 视频创意	大厂生态	音效功能是附属
aiwave	AI 音效生成	中文友好+在线编辑器	单次最长 30 秒

我觉得 AI 音效和 AI 音乐是两个不同赛道。音乐生成已经很卷了，但纯音效生成的产品在国内几乎是空白，这也是我选择做这个方向的原因。

---

一些数据

上线到现在的一些情况：

• 注册用户自然增长中（没做推广）
• 生成成功率 > 95%
• 平均生成耗时 3.2 秒
• 最受欢迎的音效类型：环境音 > 科技界面音 > 动作音效

---

总结

做一个 AI 音效平台，AI 部分其实不是最难的（接 API 就行），真正耗时间的是：

1. 浏览器内音频编辑器（Web Audio API 坑巨多）
2. 提示词工程（让中文描述变成高质量的音频生成指令）
3. 缓存和成本控制（AI 调用成本 vs 用户体验）

如果你也在做音频方向的项目，欢迎交流。

项目地址：aiwave.art
GitHub：github.com/liushafeiniao/aiwave

---

如果这篇文章对你有帮助，点个赞 👍 让更多人看到。