WHY FOX
面向电音人群的三大主张
频谱色彩波形
电音从业者一眼就懂的"声音图像"。传统灰色单色波形信息量有限，彩狐对音频实时做 FFT 频谱分析（8 段对数频带，20Hz–20kHz 全覆盖），再经自研非线性色彩映射生成彩色波形。
低频（bass）→ 红色
中频（mid）→ 绿色
高频（treble）→ 蓝色
流式分段解码
终结 PNG 波形的三大痛点。数据驱动 + 流式解码：概览层仅约 90KB（.waveform2.gz），细节按视口按需拉取。
- •概览秒开，拖动到哪加载到哪
- •只拉需要的字节，CDN 流量降一个数量级
- •全程不下载完整试听文件，弱网也流畅
专业级交互
把"打碟手"的习惯搬进浏览器，播放 / 暂停状态都可用。
- •波形拖拽刮碟（Scrub），像打碟机一样"搓"着找点
- •BPM 与调性（Key）实时标注，对拍排曲不靠猜
- •A–E 五 Cue 点记忆 + 一键临时 Cue
- •多码率切换，记忆进度无缝续播
LIVE DEMO
真实波形演示
三种集成形态，点击演示按钮即可实时加载对应功能
全局页脚播放器
页面底部常驻迷你播放器，歌曲切换不丢进度，全站一套数据源同步状态。
列表小波形
曲库列表每一行一条迷你波形，实时显示播放进度，点击即可拖动切歌。
局部大波形
播放详情页大波形，拖动刮碟、BPM 与 Key 标注、Cue 点记忆一应俱全。
COMPARE
终结 PNG 波形三大痛点
| 痛点 | PNG 图片波形 | 彩狐（数据 + 流式解码） |
|---|---|---|
| 体积 | 整曲像素图，动辄数百 KB～数 MB，多码率 × 多曲目 × 多平台成倍放大 | 单曲概览层最小体积可达 90KB（.waveform2.gz），细节按视口按需拉取 |
| 加载 | 页面必须等整张图片下载完才能显示，弱网卡顿 | 概览秒开，放大才加载视口内的片段，拖动到哪加载到哪 |
| CDN 流量 | 每个访客下载整张 PNG，流量成本线性增长 | 只拉需要的字节，CDN 流量可降一个数量级 |
双引擎解码 · 流式分段取片
内置 WebCodecs（原生解码，性能优先）+ ffmpeg（兼容兜底），两套引擎都支持分段流式解码—— HLS 切片按视口取片，单文件（flac / mp3 / wav / m4a）用 HTTP Range 只拉目标时间段的最小字节集。
INTEGRATION
集成形态
标准 Web Components
<colorful-fox-player> 播放器 + <colorful-fox-waveform> 独立波形组件，任何现代框架（Vue / React / 原生 JS / 服务端模板）直接引用即可用。
全站双态支持
全局页脚迷你播放器（歌曲切换常驻）+ 播放详情页大波形，一套数据源同步状态。
无框架锁定
纯 TypeScript + Canvas 渲染，Shadow DOM 隔离样式，不污染宿主页面。
OPTIMIZATION
传输与缓存优化
HLS 全链路去重
播放与波形共用同一份字节缓存（单飞请求 + 按消费者隔离的缓冲拷贝），m3u8 清单与 ts 切片每个链接只加载一次，播放、波形双路消费零重复流量。
接入要求
曲目上传时需生成缩略层波形数据 .waveform2.gz（约 90KB），这是流式细节渲染的地基。
COMPATIBILITY
浏览器兼容
支持所有现代浏览器（如有问题请更新到最新版本）。 不支持：360 浏览器（所谓"安全模式"）、所有 IE 浏览器。
接入流程 专业 · 高效
波形解析、流式解码、色彩映射与双引擎调度均为自研实现，接入过程由专业团队全程护航
需求对接
提供站内曲库的音频格式、码率、CDN 部署环境与目标交互形态，我们评估并给出最适合的集成方案。
波形预生成
由我们提供 waveform-cli 批量生成约 90KB 的 .waveform2.gz 文件，原音频无需上传、零外泄风险。
集成部署
SDK 支持 Web Components 即插即用，页脚迷你波形 + 详情大波形双态接入，HLS 全链路去重，一次集成全站生效。
彩狐是为电音场景量身定制的浏览器级专业播放器—— 频谱色彩波形看得懂、流式解码省流量、打碟式交互用得上，接入即提升全站听感与专业度。