🎵 VoiceOcu - 本地音频管理器

一个智能的本地音频文件管理工具，支持多种音频格式的播放、搜索和管理。使用 React + TypeScript 构建，提供现代化的用户界面和强大的音频处理功能。

• 支持多种音频格式：WAV、MP3、FLAC、OGG、M4A、AAC、WMA
• 内置音频播放器，支持播放/暂停、快进/快退
• 进度条拖拽调节播放位置
• 音量控制
• 循环播放和随机播放模式
• 自动转码不兼容格式为 MP3

• 批量导入音频文件
• 文件夹导入功能
• 目录树形结构浏览
• 文件搜索和过滤
• 隐藏/显示特定目录
• 音频文件元数据提取（标题、艺术家、专辑、年份等）

• 使用 IndexedDB 存储音频文件
• 元数据本地缓存，快速重新加载
• 支持 File System Access API 绑定目录
• 跨会话数据保持

• 现代化暗色主题设计
• 响应式布局，适配不同屏幕尺寸
• 直观的三栏布局：目录树、音频列表、详情面板
• 实时搜索和过滤
• 音频波形预览（如果支持）

• Node.js 16+
• 现代浏览器（支持 File System Access API 和 IndexedDB）

npm install

npm run dev

npm run build

npm run preview

• 前端框架: React 18 + TypeScript
• 构建工具: Vite
• 音频处理:
  • FFmpeg.wasm 用于音频转码
  • music-metadata-browser 用于元数据提取
• 数据存储: IndexedDB (通过 idb-keyval)
• 文件系统: File System Access API
• 样式: CSS3 + 现代设计系统

1. 点击 "📁 Browse Local Audio Files" 选择单个或多个音频文件
2. 点击 "📂 Import From Folder" 导入整个文件夹
3. 点击 "🔗 Bind Directory" 绑定持久化目录（需要现代浏览器支持）

• 点击音频列表中的文件开始播放
• 使用底部播放栏控制播放/暂停、上一首/下一首
• 拖拽进度条调节播放位置
• 调节音量滑块控制音量
• 启用循环播放（⟲）或随机播放（🔀）

• 在搜索框中输入关键词快速查找音频文件
• 使用左侧目录树浏览不同文件夹
• 点击目录旁的隐藏按钮隐藏不需要的文件夹

• 在右侧详情面板查看和编辑音频信息
• 支持重命名音频文件
• 查看详细的音频元数据（时长、比特率、文件大小等）

src/
├── App.tsx                 # 主应用组件
├── App.css                 # 全局样式
├── index.tsx              # 应用入口
├── features/
│   └── audioManager/      # 音频管理功能模块
│       ├── AddSoundForm.tsx    # 添加音频文件表单
│       ├── DirectoryTree.tsx   # 目录树组件
│       ├── DetailsPanel.tsx    # 详情面板
│       ├── PlayerBar.tsx       # 播放控制栏
│       ├── SoundItem.tsx       # 音频项目组件
│       ├── SoundList.tsx       # 音频列表组件
│       └── WaveformPreview.tsx # 波形预览组件
└── utils/
    ├── persistence.ts     # 数据持久化工具
    └── transcode.ts       # 音频转码工具

• WAV (.wav)
• MP3 (.mp3)
• FLAC (.flac)
• OGG (.ogg)
• M4A (.m4a)
• AAC (.aac)
• WMA (.wma)

• Chrome 86+
• Edge 86+
• Firefox 不支持 File System Access API
• Safari 部分支持

1. 在 src/features/audioManager/ 目录下创建新组件
2. 在 App.tsx 中导入并使用
3. 添加相应的样式文件

• 音频文件元数据存储在 IndexedDB 中
• 使用 src/utils/persistence.ts 进行数据操作
• 支持 File System Access API 进行文件系统绑定

• 使用 FFmpeg.wasm 进行音频转码
• 支持自动检测浏览器兼容性
• 缓存转码结果以提高性能

1. Fork 本仓库
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

本项目采用 ISC 许可证 - 查看 LICENSE 文件了解详情。

• React - 用户界面库
• Vite - 构建工具
• FFmpeg.wasm - 音频转码
• music-metadata-browser - 音频元数据提取
• idb-keyval - IndexedDB 封装

注意: 这是一个本地音频管理工具，所有数据都存储在您的浏览器中，不会上传到任何服务器。