# Uniapp_Audio

**Repository Path**: dada4545/uniapp_audio

## Basic Information

- **Project Name**: Uniapp_Audio
- **Description**: 主要想验证使用抖音Trae 自动生成代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-13
- **Last Updated**: 2026-06-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Uniapp_Audio

基于 uni-app 开发的「视频提取音频」微信小程序项目，提供本地视频、视频链接、个人中心三个菜单，支持音频预览、保存与分享，代码附有清晰的中文注释。

---

## ✨ 主要功能

| 菜单 | 功能 | 对应页面 |
| ---- | ---- | -------- |
| 📸 本地视频 | 从相册/相机选择视频，提取音频、播放、保存、分享 | [pages/local/local.vue](pages/local/local.vue) |
| 🔗 视频链接 | 输入视频 URL 自动下载并提取音频 | [pages/online/online.vue](pages/online/online.vue) |
| 👤 个人中心 | 历史记录、使用说明、缓存清理 | [pages/mine/mine.vue](pages/mine/mine.vue) |
| 📖 使用说明 | 详细使用指南 | [pages/help/help.vue](pages/help/help.vue) |

---

## 📂 项目结构

```
uniapp_audio/
├── manifest.json              # uni-app 应用配置（小程序权限、appid）
├── pages.json                 # 路由与 tabBar 配置（三个菜单）
├── main.js                    # Vue 入口文件
├── App.vue                    # 应用根组件（全局样式与生命周期）
├── .gitignore                 # Git 忽略文件
├── utils/
│   └── audio.js               # 核心工具：下载/提取/保存/历史记录
└── pages/
    ├── local/local.vue        # 本地视频提取音频
    ├── online/online.vue      # 视频链接提取音频
    ├── mine/mine.vue          # 个人中心（历史/说明/清理缓存）
    └── help/help.vue          # 使用说明页
```

核心业务逻辑集中在 [utils/audio.js](utils/audio.js)，便于将来替换为 ffmpeg.wasm 或后端转码服务。

---

## 🎯 能力说明

1. **本地视频提取**
   - 通过 `uni.chooseVideo` 选择视频（支持相册、相机）
   - `video` 组件实时预览
   - 提取音频写入小程序用户目录 `wx.env.USER_DATA_PATH`
   - 支持 `audio` 组件播放、`uni.saveFile` 持久化保存、`wx.shareFileMessage` 分享
2. **视频链接提取**
   - 通过 `uni.downloadFile` 下载视频文件
   - 基础 URL 格式校验（必须以 `http://` 或 `https://` 开头）
   - 下载完成后自动提取音频并记录
3. **个人中心**
   - `uni.getStorageSync('records')` 展示历史提取记录
   - 可播放历史音频，可一键清空历史
   - `wx.getSavedFileList` + `wx.removeSavedFile` 清理缓存文件
4. **使用说明**
   - 详细的图文指南，涵盖三个菜单的使用步骤与技术说明

---

## 🔧 安装 / 使用

1. 使用 **HBuilderX** 打开本项目目录
2. 在 `manifest.json` 的"微信小程序配置"中填入你自己的 `appid`
3. 运行 → 运行到小程序模拟器 → 微信开发者工具
4. 若使用视频链接功能，需到小程序后台 → 开发设置 → 服务器域名 → 在 `downloadFile 合法域名` 中添加视频 URL 所在域名
5. （可选）若需要 tabBar 图标，可将 48×48 png 放到 `static/tabbar/` 目录，并在 `pages.json` 的 tabBar.list 中补充 `iconPath` 与 `selectedIconPath`

---

## 📜 分阶段提交

项目以"基础结构 → 本地视频 → 在线链接 → 个人中心"四阶段提交：

```
c27aee3 feat: 实现个人中心（历史记录/使用说明/清理缓存）
42fefff feat: 实现视频链接下载并提取音频功能
7019d3f feat: 实现本地视频提取音频功能（选择/预览/提取/保存/分享）
4014c70 feat: 初始化 uni-app 项目基础结构（路由/全局样式/配置）
```

推送到远端：

```bash
git remote add origin https://gitee.com/dada4545/uniapp_audio.git
git push -u origin master
```

---

## 🤝 参与贡献

1. Fork 本仓库
2. 新建 `Feat_xxx` 分支
3. 提交代码
4. 新建 Pull Request

---

## 💡 技术说明

微信小程序环境中没有原生音轨分离 API，本项目采用「文件复制 + 写入用户目录」的方式，将视频（含音轨）保存为 mp3 音频文件，可直接在 `audio` 组件中播放。未来若接入 ffmpeg.wasm 或后端转码服务，仅需在 `utils/audio.js` 中替换实现，页面逻辑无需改动。