LemonAudio

LemonAudio 是一个基于 Vue、Vite、TypeScript 和 Web Audio API 的可视化音频编辑器。 用户可以创建多种类型的音轨，编辑 16 步节奏模式，实时试听，并将生成结果导出为 WAV 文件。

功能概览

• Studio

  • 16 步音频编辑网格
  • 支持新增、删除和切换音轨类型
  • 支持静音、独奏、声像、增益、波形和频率调整
  • 支持 BPM、音量、Snap 和时间线缩放
  • 支持 Web Audio 实时播放
  • 支持 WAV 导出

• Library

  • 查看用户保存的音频素材
  • 点击素材进行试听
  • 将素材加入 Studio
  • 删除用户素材

• Generators

  • 选择 30+ 种声音生成类型
  • 调整波形、频率和持续时间
  • 实时试听生成结果
  • 将生成声音加入 Studio
  • 保存到 Library
  • 单独导出 WAV

• 界面

  • 支持中文和英文切换
  • 深色、简约、现代化界面
  • 空项目启动，不包含预置项目或模拟用户数据

技术栈

• Vue 3
• Vite
• TypeScript
• vue-i18n
• Web Audio API
• OfflineAudioContext
• Origin Private File System（OPFS）

安装与启动

安装依赖：

npm install

启动开发服务器：

npm run dev

构建生产版本：

npm run build

预览生产版本：

npm run preview

基本使用

1. 创建音轨

进入 Studio，点击底部的“Add track / 添加音轨”，选择需要的类型，例如：

• 鼓组：Kick、Snare、Hi-hat、Clap、Tom、Shaker、Crash、Ride
• 低音：Sub bass、Bass、808、Reese bass
• 旋律：Chord、Lead、Pluck、Pad、Arpeggio、Keys、Bell、Organ、Strings、Synth
• 环境与效果：Texture、Noise、Riser、Impact、Drone、Ambience
• 人声质感：Vocal、Formant voice

创建后，可以在音轨行中点击 16 步网格编辑节奏，也可以在右侧 Inspector 面板调整音色参数。

2. 播放与编辑

• 点击播放按钮开始试听
• 点击停止按钮停止播放
• 调整 BPM 修改节奏速度
• 使用 M 切换静音
• 使用 Solo 只播放当前音轨
• 通过 Gain 和 Pan 调整音量与左右声道位置
• 通过 Waveform 和 Frequency 调整振荡器

3. 使用生成器

进入 Generators，选择声音类型、波形、频率和时长。

可执行以下操作：

• Preview：试听当前声音
• Add to Studio：将声音加入当前工程
• Save to Library：将声音渲染后保存到用户音频库
• Export sound：导出单个 WAV 文件

4. 使用音频库

保存生成器声音后，进入 Library：

• 点击卡片试听
• 点击 Add 将素材加入 Studio
• 点击删除按钮移除素材

数据存储

LemonAudio 使用 OPFS 保存用户数据，不使用 LocalStorage 或 SessionStorage。

数据目录：

OPFS/
└── lemonaudio-data/
    ├── workspace.json
    ├── library.json
    └── audio-<id>.wav

workspace.json

保存当前工作区信息：

• 项目名称
• BPM
• 主音量
• 用户创建的音轨
• 音轨节奏模式
• 音轨类型、波形、频率、增益和声像

library.json

保存用户音频素材的元数据，包括：

• 素材 ID
• 音轨类型
• 频率
• 波形
• 持续时间
• 颜色
• 对应的 OPFS 音频文件名

音频文件

生成器保存的音频会以 WAV 格式直接写入 OPFS，Library 试听时优先读取对应的本地音频文件。

浏览器要求

建议使用支持以下能力的现代浏览器：

• Web Audio API
• OfflineAudioContext
• File System Access API
• Origin Private File System

建议使用最新版 Chrome、Edge 或其他基于 Chromium 的浏览器。

如果浏览器不支持 OPFS，页面会显示 OPFS 不可用状态，用户数据不会自动写入其他存储位置。

项目结构

.
├── src/
│   ├── App.vue       # 主界面、编辑器和音频逻辑
│   ├── i18n.ts       # 中英文翻译
│   ├── main.ts       # Vue 应用入口
│   ├── storage.ts    # OPFS 存储服务
│   └── styles.css    # 全局样式
├── index.html
├── package.json
├── tsconfig.app.json
├── tsconfig.node.json
└── vite.config.ts

注意事项

• 浏览器首次播放音频时需要用户手势，点击播放或试听按钮即可激活音频上下文。
• 清理浏览器站点数据会同时删除 OPFS 中的 LemonAudio 数据。
• WAV 导出使用 OfflineAudioContext 渲染，不依赖服务器。
• 所有音频生成和试听都在用户浏览器本地完成。