HTML5原生playbackRate无法实现变速不变调，因其线性重采样必然改变音高；真正可行方案需通过Web Audio API结合STFT/ISTFT频域处理或Tone.js等封装库实现。
HTML5 音频播放器的播放速率调节很简单，但变调问题无法靠原生方式解决——playbackRate 改变速度必然改变音高，这是底层采样缩放机制决定的。想实现“变速不变调”（比如 DJ 台效果），必须绕过 playbackRate，走时频域处理路线。
原生 playbackRate 的工作方式与局限
audio 或 video 元素的 playbackRate 属性直接控制时间轴推进快慢：设为 2.0 就是两倍速播放，0.5 就是半速。但它本质是线性重采样——拉伸或压缩波形采样点间距，导致整个频谱平移。结果就是：快放声音变尖，慢放声音变沉。
- 所有主流浏览器都支持 playbackRate，值域通常为 0.5–2.0（iOS Safari 对非整数倍速较保守）
- 必须在 loadedmetadata 事件触发后设置才有效，且需用户交互上下文（如点击后）才能生效
- 它不提供 preservesPitch 开关；Chromium 曾实验性支持
preservesPitch = false，但未标准化，不可依赖
真正实现变速不变调的可行路径
要保持音高不变只调整时长，得用相位声码器（Phase Vocoder）类算法，在频域操作：先 STFT 分帧→校正相位连续性→沿时间轴增删帧→ISTFT 重建。Web Audio API 本身不内置该能力，需组合实现：
- 用 AudioWorklet 替代废弃的 ScriptProcessorNode：在独立音频线程中运行自定义逻辑，避免主线程卡顿
- 手动实现 STFT/ISTFT：借助轻量 FFT 库（如 fft-js），对每帧做短时傅里叶变换，注意加窗和重叠相加（OLA）消除 artifacts
- 复用成熟封装库更高效：Tone.js、howler.js 等已封装 pitch-corrected time-stretching，内部基于 WebAssembly 或优化 JS 实现 WSOLA 等算法
实际开发中的取舍建议
多数场景不需要专业级音高校准，可按需求分层处理：
立即学习“前端免费学习笔记（深入）”；
- 仅需基础倍速（教学、播客快听）：直接用
audio.playbackRate = 1.25，简单可靠 - 要求保真变调（音乐练习、多轨混音）：接入 Tone.js 的
TimeStretch或Player类，一行代码启用 pitch-corrected 模式 - 定制化强、需低延迟实时处理（如在线 DJ 工具）：构建 AudioWorklet + WebAssembly FFT 模块，自己控制相位校正粒度
兼容性与落地注意事项
无论选哪种方案，都要面对真实环境约束：
- iOS Safari 不支持 playbackRate 非整数值（如 1.25），也不支持负值倒放；设完应读回验证是否生效
- AudioWorklet 在 Safari 中支持较晚（iOS 15.4+），旧版需降级为传统节点链或提示不支持
- 实时频域处理 CPU 开销大，移动端建议限制最大并发轨道数，并启用
context.suspend()节能
