HTML5中Web Audio API实现变速不变调需绕过playbackRate的简单重采样，改用基于相位声码器的时频域处理，如AudioWorklet+STFT/ISTFT或Tone.js等成熟库。
在HTML5中用Web Audio API实现变速不变调（pitch-corrected time-stretching），本质是绕过原生AudioBufferSourceNode.playbackRate的简单重采样（它会同时变调），改用基于相位声码器（Phase Vocoder）原理的时频域处理——目前Web Audio标准本身不内置该算法，需结合JavaScript手动实现核心逻辑，或借助成熟库封装。
为什么原生playbackRate不行？
playbackRate直接缩放采样点间隔，属于“时间域线性重采样”：速度×2 → 采样率翻倍 → 频谱整体右移 → 音高升高八度。DJ台要求“快放但不尖、慢放但不沉”，必须解耦时间拉伸与频率平移。
可行方案：用ScriptProcessorNode（已弃用）？不，用AudioWorklet
现代做法是使用AudioWorklet（取代废弃的ScriptProcessorNode），在音频处理线程中运行自定义时频变换：
- 将输入音频块（如1024点）做短时傅里叶变换（STFT）→ 得到复数频谱帧
- 对每一帧的相位进行连续性校正（unwrap + 相位导数补偿），避免时间拉伸导致的相位断裂
- 沿时间轴插值/删减频谱帧（实现变速），但保持每帧内幅值与相位关系不变（保障音高）
- 用逆STFT（ISTFT）重建波形，加窗重叠相加（OLA）消除边界伪影
注意：浏览器不提供内置STFT，需用FFT库（如fft-js）或手写轻量级复数FFT；AudioWorklet中不能直接调用Canvas或DOM，所有计算需纯JS+TypedArray。
立即学习“前端免费学习笔记（深入）”；
更实用的路径：用现成Web Audio增强库
从零实现稳定相位声码器难度高、实时性难保障。推荐以下经生产验证的方案：
-
Tone.js：内置
TimeStretch节点（基于改进的WSOLA算法），支持rate独立控制且默认保持音高：const player = new Tone.Player("track.mp3").toDestination();<br>player.player.buffer = new Tone.ToneAudioBuffer("track.mp3"); // 确保解码<br>player.playbackRate = 1.5; // 自动启用变速不变调 -
standardized-audio-context + web-audio-dsp：前者提供跨浏览器AudioWorklet兼容层，后者含
PhaseVocoderProcessor示例，可直接注入自定义AudioWorklet -
howler.js v2.2+：开启
html5: false并配置rate时，底层会尝试用Web Audio+时域同步策略逼近不变调效果（非严格相位声码器，但对多数音乐足够自然）
关键细节与避坑提示
无论自研或用库，以下点直接影响DJ级体验：
- 缓冲区大小要小：设为128或256 sample（而非默认1024），降低延迟，适合搓盘（scrubbing）和实时beat匹配
-
预加载与解码必须完成：用
audioContext.decodeAudioData()确保AudioBuffer就绪，否则变速时触发解码卡顿 -
避免频繁创建/销毁节点：DJ台需多轨叠加，复用
AudioWorkletNode实例，用port.postMessage()动态传参（如新rate值） -
监听
onaudioprocess？别用：该事件已废弃，AudioWorklet才是唯一合规实时处理入口
