项目地址
https://github.com/zhongkangjk/music-cut-tool 是私有项目
存放在chunhtml目录下的
music-cut文件夹里 项目导出的文件
🎵 音频裁剪工具
一个基于Vue 3的网页端音频裁剪工具,支持离线使用,可以将音频文件裁剪并导出为高质量MP3格式。
✨ 主要特性
- 🎧 支持多种音频格式 - 支持MP3、WAV等常见音频格式输入
- ✂️ 精确时间控制 - 可精确设置开始和结束时间(精确到0.1秒)
- 🎵 高质量MP3导出 - 使用192kbps比特率输出专业级音质
- 💻 完全离线 - 所有处理都在浏览器中完成,无需上传到服务器
- 🚀 轻量级 - 使用精简的lamejs库(仅200KB),替代笨重的FFmpeg
- 🎨 现代UI - 响应式设计,支持拖拽上传
- ⚡ 实时预览 - 可以预览裁剪片段效果
🛠️ 技术栈
- 前端框架: Vue 3 + TypeScript
- 构建工具: Vite
- 音频处理: Web Audio API
- MP3编码: lamejs (LAME MP3编码器的JavaScript实现)
- 样式: CSS3 + 现代设计
- 代码质量: ESLint + TypeScript严格检查
🚀 快速开始
环境要求
- Node.js 20.19+ 或 22.12+
- 现代浏览器(支持Web Audio API)
安装依赖
bash
npm install开发模式
bash
npm run dev访问 http://localhost:5173 开始使用
构建生产版本
bash
npm run build构建文件将生成在 dist 目录中
📖 使用说明
上传音频文件
- 点击上传区域选择文件,或直接拖拽音频文件到页面
- 支持MP3、WAV等格式
设置裁剪时间
- 使用数字输入框精确设置开始和结束时间
- 支持分钟和秒的分别设置,精确到0.1秒
预览效果
- 点击"预览裁剪片段"按钮试听裁剪后的效果
导出MP3
- 点击"导出高质量MP3音频"按钮
- 自动下载裁剪后的高质量MP3文件(192kbps)
🎯 核心优势
与传统方案对比
| 特性 | 本项目 | FFmpeg方案 | 在线工具 |
|---|---|---|---|
| 库大小 | ~200KB | ~30MB | N/A |
| 加载速度 | <1秒 | 5-10秒 | 依赖网络 |
| 隐私安全 | ✅ 完全本地 | ✅ 本地 | ❌ 需上传 |
| 离线使用 | ✅ 支持 | ✅ 支持 | ❌ 需网络 |
| 音质 | 192kbps | 可配置 | 通常较低 |
技术亮点
- 动态加载: 仅在需要时加载MP3编码库
- 内存优化: 分块处理大文件,避免内存溢出
- 类型安全: 完整的TypeScript类型定义
- 错误处理: 完善的错误处理和用户反馈
📁 项目结构
music-cut/
├── src/
│ ├── components/
│ │ └── AudioCutter.vue # 主要组件
│ ├── utils/
│ │ ├── mp3Encoder.js # MP3编码器
│ │ └── mp3Encoder.d.ts # 类型声明
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
├── public/ # 静态资源
├── dist/ # 构建输出
└── README.md # 项目说明🔧 开发命令
bash
# 开发模式
npm run dev
# 构建生产版本
npm run build
# 构建用于子目录部署的版本
npm run build:subdir
# 构建用于根目录部署的版本
npm run build:root
# 类型检查
npm run type-check
# 代码检查和修复
npm run lint
# 预览构建结果
npm run preview
# 运行单元测试
npm run test:unit
# 运行E2E测试
npm run test:e2e🌟 特色功能
1. 精简MP3编码器
- 使用lamejs库替代FFmpeg,体积减少99%+
- 专注MP3编码,移除所有无关功能
- 支持高质量192kbps比特率
2. 智能音频处理
- 自动检测音频格式和参数
- 智能重采样到标准44.1kHz
- 保持原有声道配置(单声道/立体声)
3. 用户体验优化
- 拖拽上传支持
- 实时进度反馈
- 键盘快捷键支持(空格播放/暂停,方向键调整时间)
- 响应式设计,适配各种屏幕
📄 许可证
本项目采用 MIT 许可证
