Web Audio API 浏览器音频5 分钟跑通最小示例与 3 个实战场景【免费下载链接】web-audio-apiThe Web Audio API v1.0, developed by the W3C Audio WG项目地址: https://gitcode.com/gh_mirrors/we/web-audio-api每次在网页里加一段声音总有一堆烦心事背景音不响、淡入时咔一声、频谱画不出来。这背后是 W3C 的 Web Audio API 在起作用——它是浏览器音频处理的官方规范本仓库就是它的 v1.0 编辑器草稿。搞懂它的节点模型和参数自动化你遇到的大多数浏览器音频问题都能直接定位。️ 什么是 Web Audio API一句话讲透把它理解成浏览器内置的调音台AudioContext是调音台本体AudioNode是台上的设备connect()是连接线AudioParam是拧得动、还能随时间自动变化的旋钮。信号从源节点振荡器、媒体元素、麦克风出发经过一连串处理节点最终走到destination扬声器。Web Audio API 项目标识整个规范的可视化入口能力清单10 秒扫完它的边界能力对应接口合成与回放声音OscillatorNode、AudioBufferSourceNode、MediaElementAudioSourceNode均衡 / 高低通滤波BiquadFilterNode、ChannelSplitterNode、ChannelMergerNode混响、延迟等效果ConvolverNode、DelayNode、GainNode频谱与波形分析AnalyserNode离线渲染音频OfflineAudioContext自定义处理算法AudioWorklet3D 空间音频PannerNodeAudioListener⏱️ Web Audio API 最小示例5 分钟跑通下面这段代码会创建一条振荡器 → 增益 → 扬声器的最短链路让一个 440Hz 正弦波淡入、播放 2 秒、再淡出// 创建音频上下文必须在用户交互后创建否则处于 suspended 状态 const ctx new AudioContext(); const osc ctx.createOscillator(); osc.type sine; osc.frequency.value 440; // 440Hz 标准 A 音 const gain ctx.createGain(); osc.connect(gain); // 振荡器 - 增益 gain.connect(ctx.destination); // 增益 - 扬声器 const now ctx.currentTime; // 上下文内部时钟排自动化要用它 gain.gain.setValueAtTime(0.0001, now); gain.gain.linearRampToValueAtTime(0.5, now 0.5); // 0.5 秒淡入 gain.gain.setValueAtTime(0.5, now 2); // 保持 1.5 秒 gain.gain.linearRampToValueAtTime(0.0001, now 2.5); // 再淡出 osc.start(now); osc.stop(now 2.6); // 2.6 秒后停止预期你会听到一个平稳升起、持续约 2 秒、平稳落下的纯音全程没有爆音。如果完全无声先打印ctx.state检查是不是suspended。 三个真实场景动手练浏览器音频从入门到进阶给播放器接上实时频谱AnalyserNode想让音频的频谱画到页面上用AnalyserNode把信号分出一路分析再用requestAnimationFrame轮询频点const ctx new AudioContext(); const audio document.querySelector(audio); const src ctx.createMediaElementSource(audio); const analyser ctx.createAnalyser(); analyser.fftSize 2048; src.connect(analyser); analyser.connect(ctx.destination); // 分析后的信号仍要送去扬声器 const bins new Uint8Array(analyser.frequencyBinCount); function draw() { analyser.getByteFrequencyData(bins); // 0~255 的频点能量 const canvas document.querySelector(canvas); const g canvas.getContext(2d); g.clearRect(0, 0, canvas.width, canvas.height); for (let i 0; i bins.length; i 16) { g.fillRect(i * 16, canvas.height - bins[i], 8, bins[i]); } requestAnimationFrame(draw); } draw();AudioParam自动化曲线setValueAtTime定值linearRampToValueAtTime平滑过渡fftSize越大频谱越细代价是frequencyBinCountfftSize / 2个频点要逐帧处理。getByteFrequencyData接收的数组长度必须不小于frequencyBinCount这是新手最容易报IndexSizeError的地方。用噪声脉冲实现卷积混响ConvolverNode混响本质是卷积信号和一段脉冲响应相乘听感就像进了不同的房间。不想找素材的话可以用OfflineAudioContext离线渲染一段指数衰减噪声当脉冲响应const sampleRate 44100; const offline new OfflineAudioContext(1, sampleRate, sampleRate); // 1 秒 const buffer offline.createBuffer(1, sampleRate, sampleRate); const data buffer.getChannelData(0); for (let i 0; i data.length; i) { data[i] (Math.random() * 2 - 1) * Math.pow(1 - i / data.length, 3); // 指数衰减 } offline.startRendering().then(ir { const ctx new AudioContext(); const osc ctx.createOscillator(); osc.frequency.value 220; const convolver ctx.createConvolver(); convolver.buffer ir; // 离线渲染出的脉冲响应 osc.connect(convolver); convolver.connect(ctx.destination); osc.start(); });ConvolverNode的卷积混响原理注意OfflineAudioContext的第三个参数是采样率第二个是总采样数别和采样率搞混。衰减指数越大房间越干想听大教堂效果就调小指数、加长时长。让声源跟着头部转动PannerNode进阶玩法是空间音频PannerNode放声源AudioListener是耳朵转动设备头部时更新听者坐标声音方位感会跟着走const ctx new AudioContext(); const osc ctx.createOscillator(); osc.frequency.value 440; const panner ctx.createPanner(); panner.panningModel HRTF; // 头相关传输函数更接近真实听感 osc.connect(panner); panner.connect(ctx.destination); panner.positionX.value 2; // 声源固定在右前方 panner.positionY.value 0; panner.positionZ.value -2; osc.start(); window.addEventListener(deviceorientation, (e) { ctx.listener.positionX.value e.gamma || 0; // 设备方位角 - 听者坐标 ctx.listener.positionY.value e.beta || 0; ctx.listener.positionZ.value e.alpha || 0; });HRTF 泛音模型下声源与听者的空间关系panningModel可选equalpower、HRTF、none三种其中 HRTF 计算量最大但空间感最真实。deviceorientation在 Android 浏览器上开箱即用iOS Safari 需要先调用DeviceOrientationEvent.requestPermission()。⚠️ 新手最容易踩的 3 个坑Web Audio API 无声与爆音排查一、页面加载完就播放结果全程静音原因现代浏览器的自动播放策略让AudioContext初始为suspended。解法把new AudioContext()放进用户点击等手势回调里创建或之后手动调ctx.resume()并监听onstatechange确认进入running。二、exponentialRampToValueAtTime不生效或报错原因指数过渡要求起点非零且目标值不能是 0。解法先setValueAtTime(0.5, now)定好起点目标值用0.0001这类极小正数代替。三、突然切断声音时咔一声爆音原因增益被瞬间置零或节点直接断开。解法断开前用 20~50ms 的linearRampToValueAtTime做短淡出再断线。 什么时候该看源码 / 官方文档Web Audio API 规范阅读路径这个仓库本身就是规范源码本地克隆后用浏览器直接打开 index.bs 即可阅读。建议路径index.bs13000 行的主规范文档所有接口的字段、算法和约束定义都在这里适合遇到具体行为疑问时按接口名检索explainer/user-selectable-render-size.md设计提案explainer的写法示例适合想理解规范为什么这么定、准备提 PR 的开发者images/规范配图目录audioparam-automation*.png、reverb-convolver.png、HRTF_panner.png对应上文三个场景的原理一句话分工排查行为看index.bs对应接口的章节理解设计动机看explainer/读规范时配着配图看抽象的自动化时序会清楚很多。结尾把频谱示例里的fftSize从 2048 改成 64再刷新页面看一眼频点从 1024 个骤降到 32 个柱子会变粗、低频细节会糊掉——这个对比比读十页规范都直观。【免费下载链接】web-audio-apiThe Web Audio API v1.0, developed by the W3C Audio WG项目地址: https://gitcode.com/gh_mirrors/we/web-audio-api创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Web Audio API 浏览器音频：5 分钟跑通最小示例与 3 个实战场景
Web Audio API 浏览器音频5 分钟跑通最小示例与 3 个实战场景【免费下载链接】web-audio-apiThe Web Audio API v1.0, developed by the W3C Audio WG项目地址: https://gitcode.com/gh_mirrors/we/web-audio-api每次在网页里加一段声音总有一堆烦心事背景音不响、淡入时咔一声、频谱画不出来。这背后是 W3C 的 Web Audio API 在起作用——它是浏览器音频处理的官方规范本仓库就是它的 v1.0 编辑器草稿。搞懂它的节点模型和参数自动化你遇到的大多数浏览器音频问题都能直接定位。️ 什么是 Web Audio API一句话讲透把它理解成浏览器内置的调音台AudioContext是调音台本体AudioNode是台上的设备connect()是连接线AudioParam是拧得动、还能随时间自动变化的旋钮。信号从源节点振荡器、媒体元素、麦克风出发经过一连串处理节点最终走到destination扬声器。Web Audio API 项目标识整个规范的可视化入口能力清单10 秒扫完它的边界能力对应接口合成与回放声音OscillatorNode、AudioBufferSourceNode、MediaElementAudioSourceNode均衡 / 高低通滤波BiquadFilterNode、ChannelSplitterNode、ChannelMergerNode混响、延迟等效果ConvolverNode、DelayNode、GainNode频谱与波形分析AnalyserNode离线渲染音频OfflineAudioContext自定义处理算法AudioWorklet3D 空间音频PannerNodeAudioListener⏱️ Web Audio API 最小示例5 分钟跑通下面这段代码会创建一条振荡器 → 增益 → 扬声器的最短链路让一个 440Hz 正弦波淡入、播放 2 秒、再淡出// 创建音频上下文必须在用户交互后创建否则处于 suspended 状态 const ctx new AudioContext(); const osc ctx.createOscillator(); osc.type sine; osc.frequency.value 440; // 440Hz 标准 A 音 const gain ctx.createGain(); osc.connect(gain); // 振荡器 - 增益 gain.connect(ctx.destination); // 增益 - 扬声器 const now ctx.currentTime; // 上下文内部时钟排自动化要用它 gain.gain.setValueAtTime(0.0001, now); gain.gain.linearRampToValueAtTime(0.5, now 0.5); // 0.5 秒淡入 gain.gain.setValueAtTime(0.5, now 2); // 保持 1.5 秒 gain.gain.linearRampToValueAtTime(0.0001, now 2.5); // 再淡出 osc.start(now); osc.stop(now 2.6); // 2.6 秒后停止预期你会听到一个平稳升起、持续约 2 秒、平稳落下的纯音全程没有爆音。如果完全无声先打印ctx.state检查是不是suspended。 三个真实场景动手练浏览器音频从入门到进阶给播放器接上实时频谱AnalyserNode想让音频的频谱画到页面上用AnalyserNode把信号分出一路分析再用requestAnimationFrame轮询频点const ctx new AudioContext(); const audio document.querySelector(audio); const src ctx.createMediaElementSource(audio); const analyser ctx.createAnalyser(); analyser.fftSize 2048; src.connect(analyser); analyser.connect(ctx.destination); // 分析后的信号仍要送去扬声器 const bins new Uint8Array(analyser.frequencyBinCount); function draw() { analyser.getByteFrequencyData(bins); // 0~255 的频点能量 const canvas document.querySelector(canvas); const g canvas.getContext(2d); g.clearRect(0, 0, canvas.width, canvas.height); for (let i 0; i bins.length; i 16) { g.fillRect(i * 16, canvas.height - bins[i], 8, bins[i]); } requestAnimationFrame(draw); } draw();AudioParam自动化曲线setValueAtTime定值linearRampToValueAtTime平滑过渡fftSize越大频谱越细代价是frequencyBinCountfftSize / 2个频点要逐帧处理。getByteFrequencyData接收的数组长度必须不小于frequencyBinCount这是新手最容易报IndexSizeError的地方。用噪声脉冲实现卷积混响ConvolverNode混响本质是卷积信号和一段脉冲响应相乘听感就像进了不同的房间。不想找素材的话可以用OfflineAudioContext离线渲染一段指数衰减噪声当脉冲响应const sampleRate 44100; const offline new OfflineAudioContext(1, sampleRate, sampleRate); // 1 秒 const buffer offline.createBuffer(1, sampleRate, sampleRate); const data buffer.getChannelData(0); for (let i 0; i data.length; i) { data[i] (Math.random() * 2 - 1) * Math.pow(1 - i / data.length, 3); // 指数衰减 } offline.startRendering().then(ir { const ctx new AudioContext(); const osc ctx.createOscillator(); osc.frequency.value 220; const convolver ctx.createConvolver(); convolver.buffer ir; // 离线渲染出的脉冲响应 osc.connect(convolver); convolver.connect(ctx.destination); osc.start(); });ConvolverNode的卷积混响原理注意OfflineAudioContext的第三个参数是采样率第二个是总采样数别和采样率搞混。衰减指数越大房间越干想听大教堂效果就调小指数、加长时长。让声源跟着头部转动PannerNode进阶玩法是空间音频PannerNode放声源AudioListener是耳朵转动设备头部时更新听者坐标声音方位感会跟着走const ctx new AudioContext(); const osc ctx.createOscillator(); osc.frequency.value 440; const panner ctx.createPanner(); panner.panningModel HRTF; // 头相关传输函数更接近真实听感 osc.connect(panner); panner.connect(ctx.destination); panner.positionX.value 2; // 声源固定在右前方 panner.positionY.value 0; panner.positionZ.value -2; osc.start(); window.addEventListener(deviceorientation, (e) { ctx.listener.positionX.value e.gamma || 0; // 设备方位角 - 听者坐标 ctx.listener.positionY.value e.beta || 0; ctx.listener.positionZ.value e.alpha || 0; });HRTF 泛音模型下声源与听者的空间关系panningModel可选equalpower、HRTF、none三种其中 HRTF 计算量最大但空间感最真实。deviceorientation在 Android 浏览器上开箱即用iOS Safari 需要先调用DeviceOrientationEvent.requestPermission()。⚠️ 新手最容易踩的 3 个坑Web Audio API 无声与爆音排查一、页面加载完就播放结果全程静音原因现代浏览器的自动播放策略让AudioContext初始为suspended。解法把new AudioContext()放进用户点击等手势回调里创建或之后手动调ctx.resume()并监听onstatechange确认进入running。二、exponentialRampToValueAtTime不生效或报错原因指数过渡要求起点非零且目标值不能是 0。解法先setValueAtTime(0.5, now)定好起点目标值用0.0001这类极小正数代替。三、突然切断声音时咔一声爆音原因增益被瞬间置零或节点直接断开。解法断开前用 20~50ms 的linearRampToValueAtTime做短淡出再断线。 什么时候该看源码 / 官方文档Web Audio API 规范阅读路径这个仓库本身就是规范源码本地克隆后用浏览器直接打开 index.bs 即可阅读。建议路径index.bs13000 行的主规范文档所有接口的字段、算法和约束定义都在这里适合遇到具体行为疑问时按接口名检索explainer/user-selectable-render-size.md设计提案explainer的写法示例适合想理解规范为什么这么定、准备提 PR 的开发者images/规范配图目录audioparam-automation*.png、reverb-convolver.png、HRTF_panner.png对应上文三个场景的原理一句话分工排查行为看index.bs对应接口的章节理解设计动机看explainer/读规范时配着配图看抽象的自动化时序会清楚很多。结尾把频谱示例里的fftSize从 2048 改成 64再刷新页面看一眼频点从 1024 个骤降到 32 个柱子会变粗、低频细节会糊掉——这个对比比读十页规范都直观。【免费下载链接】web-audio-apiThe Web Audio API v1.0, developed by the W3C Audio WG项目地址: https://gitcode.com/gh_mirrors/we/web-audio-api创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考