Skip to content

项目地址

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 目录中

📖 使用说明

  1. 上传音频文件

    • 点击上传区域选择文件,或直接拖拽音频文件到页面
    • 支持MP3、WAV等格式
  2. 设置裁剪时间

    • 使用数字输入框精确设置开始和结束时间
    • 支持分钟和秒的分别设置,精确到0.1秒
  3. 预览效果

    • 点击"预览裁剪片段"按钮试听裁剪后的效果
  4. 导出MP3

    • 点击"导出高质量MP3音频"按钮
    • 自动下载裁剪后的高质量MP3文件(192kbps)

🎯 核心优势

与传统方案对比

特性本项目FFmpeg方案在线工具
库大小~200KB~30MBN/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 许可证

🙏 致谢

  • lamejs - 提供MP3编码能力
  • Vue.js - 优秀的前端框架
  • Vite - 快速的构建工具