Audio Waveform Visualizer

一个基于 Web 的音频波形可视化工具，可以将本地音频文件以两种不同的风格呈现为动态波形。

功能特性

• 📂 本地音频加载：支持选择本地音频文件（MP3、WAV、OGG、M4A）
• 🎨 双模式可视化：
  • 横向波形：条形图横跨整个宽度，高度代表振幅
  • 圆形波形：条形从中心辐射，长度代表振幅
• ▶️ 播放控制：支持播放/暂停，带有进度条拖拽
• 🎵 实时动画：60fps 平滑动画，实时响应音频频率
• 🎬 录屏功能：播放时自动录制波形动画，可保存为 WebM 视频
• 🌓 精美界面：采用深色主题，渐变色彩和发光效果

技术栈

• Web Audio API：用于音频解码和频率分析（AudioContext、AnalyserNode）
• Canvas API：用于波形绘制和动画渲染（requestAnimationFrame）
• File API：用于读取本地音频文件

快速开始

安装

直接克隆项目并在浏览器中打开 index.html 即可：

git clone <repository-url>
cd audio-shape
open index.html

使用说明

1. 点击"📂 选择音频文件"按钮
2. 从本地选择一个音频文件（MP3、WAV、OGG 或 M4A）
3. 选择可视化风格（横向/圆形）
4. 点击播放按钮开始播放音频
5. 使用进度条跳转到音频的任意位置

浏览器兼容性

支持所有现代浏览器：

• Chrome 66+
• Firefox 60+
• Safari 11+
• Edge 79+

项目结构

audio-shape/
├── index.html    # 主应用文件
├── SPEC.md       # 项目规范文档
└── README.md     # 本文件

设计亮点

• 🎨 深色主题设计，减少视觉疲劳
• ✨ 渐变色彩和微妙的发光效果
• 🎯 响应式布局，适配不同屏幕尺寸
• 🔄 流畅的交互反馈和过渡动画
• 💫 静态波形预览 + 动态实时播放模式
• 🔴 播放时呼吸灯效果，录屏状态可视化提示

许可证

MIT License