基于Vue3+ffmpeg.wasm的纯前端音频转换工具开源了！支持NCM解密/视频提取/音频裁剪（附源码）

---

💡 完全在浏览器里运行，文件不上传服务器，免费无限制

✅ 技术栈：Vue3 + TypeScript + Vite + Ant Design Vue + ffmpeg.wasm

✅ GitHub：https://github.com/akinnya/sonakin

✅ 在线体验：https://akinnya.github.io/sonakin/

---

一、项目介绍

Sonakin 是一个纯前端音频处理工具，所有操作都在你的浏览器里完成，不需要服务器，不上传任何文件，完全免费。

核心能力：

• 音频格式互转（MP3 / WAV / FLAC / OGG / AAC）
• 视频提取音频（MP4 / MKV / AVI / MOV / WebM）
• 网易云 NCM 文件解密
• 音频裁剪、多文件合并、音量调整
• 自定义比特率和采样率
• 在线预览播放、转换历史记录、深色模式

---

二、在线体验

直接访问：https://akinnya.github.io/sonakin/

无需安装，打开即用。

---

三、功能截图

---

四、核心功能详解

4.1 音频格式互转

支持 MP3、WAV、FLAC、OGG、AAC 五种格式任意互转，可自定义比特率（64k_{320k）和采样率（22050}48000 Hz）。

底层基于 ffmpeg.wasm，把 FFmpeg 编译成 WebAssembly 在浏览器里跑，无需任何服务端支持。

4.2 视频提取音频

支持 MP4、MKV、AVI、MOV、WebM、FLV 等常见视频格式，上传后直接提取音轨，转成你想要的音频格式。

4.3 网易云 NCM 解密

网易云下载的 .ncm 文件是加密格式，无法直接播放。Sonakin 使用 Web Crypto API 在浏览器里解密，解密后自动识别原始格式（通常是 MP3 或 FLAC），并保留歌曲元数据（歌名、歌手、专辑封面）。

4.4 音频裁剪

每个文件点击「高级」按钮展开，可以设置开始和结束时间（单位：秒），精确裁剪片段。常见场景：剪铃声、截取歌曲高潮部分。

4.5 多文件合并

上传多个音频文件，点击「合并转换」，将所有文件按顺序拼接成一个音频文件输出。

4.6 音量调整

在高级面板里拖动滑块，可以将音量调整到 0%~300%，放大或缩小音量后再导出。

---

五、技术实现

5.1 整体架构

纯静态页面（Vue3 + Vite）
    ↓
ffmpeg.wasm（WebAssembly）
    ↓
浏览器本地文件处理
    ↓
直接下载，不经过服务器

5.2 ffmpeg.wasm 核心调用

import { FFmpeg } from '@ffmpeg/ffmpeg'
import { toBlobURL, fetchFile } from '@ffmpeg/util'

const ffmpeg = new FFmpeg()
await ffmpeg.load({
  coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
  wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
})

// 写入文件
await ffmpeg.writeFile('input.mp3', await fetchFile(file))
// 执行转换
await ffmpeg.exec(['-i', 'input.mp3', '-c:a', 'libvorbis', 'output.ogg'])
// 读出结果
const data = await ffmpeg.readFile('output.ogg')
const blob = new Blob([new Uint8Array(data)], { type: 'audio/ogg' })

5.3 NCM 解密原理

1. 读取文件头校验 Magic Number
2. AES-128-ECB 解密 RC4 密钥
3. 用 RC4 密钥生成 KeyBox
4. 用 KeyBox 对音频数据做 XOR 解密
5. 解析 Meta 信息获取歌曲元数据
6. 读取封面图片数据

使用浏览器原生 Web Crypto API 完成 AES 解密，无需第三方加密库。

---

六、技术栈

技术	版本	用途
Vue 3	3.x	前端框架
TypeScript	5.x	类型安全
Vite	8.x	构建工具
Ant Design Vue	4.x	UI 组件库
@ffmpeg/ffmpeg	0.12.x	WebAssembly 音视频处理
Web Crypto API	浏览器原生	NCM 解密
GitHub Pages	—	免费静态托管

---

七、本地运行

git clone https://github.com/akinnya/sonakin.git
cd sonakin
npm install
npm run dev
# 访问 http://localhost:5173/sonakin/

八、源码地址

GitHub：https://github.com/akinnya/sonakin

在线体验：https://akinnya.github.io/sonakin/

觉得有用的话点个 ⭐ Star 支持一下！

---

如果有问题或建议，欢迎在 GitHub 提 Issue 或评论区留言交流。