如何通过 Audio Context API 在浏览器中实现实时的音频可视化效果？

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何通过 Audio Context API 在浏览器中实现实时的音频可视化效果？

2025-10-13

浏览次数：次

返回列表

使用Web Audio API和Canvas实现实时音频可视化，首先创建AudioContext并连接音频源与AnalyserNode，再通过fftSize设置频率分辨率，利用Uint8Array获取频域或时域数据，最后在Canvas上结合requestAnimationFrame循环绘制频谱柱状图或波形图，实现动态可视化效果。

如何通过 audio context api 在浏览器中实现实时的音频可视化效果？

要在浏览器中实现实时音频可视化，核心是使用 Web Audio API 中的 AudioContext 搭配 AnalyserNode 来获取音频的时域或频域数据，再结合 Canvas 或 WebGL 将其绘制成图形。

创建 AudioContext 并接入音频源

第一步是初始化一个 AudioContext，并将音频源（如元素、麦克风输入或在线流）连接到分析节点。

示例：从页面上的 audio 元素获取声音

const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const analyser = audioContext.createAnalyser(); const audioElement = document.getElementById('myAudio'); const source = audioContext.createMediaElementSource(audioElement); source.connect(analyser); analyser.connect(audioContext.destination); // 保持声音输出

配置 AnalyserNode 获取音频数据

analyser 节点能提供实时的波形（时域）和频率（频域）数据。你需要设置参数并创建数据容器。

analyser.fftSize = 2048; const bufferLength = analyser.frequencyBinCount; const frequencyData = new Uint8Array(bufferLength); const timeDomainData = new Uint8Array(bufferLength);

说明：

fftSize 决定频率分辨率，值越大细节越多，但性能开销略高
frequencyBinCount 是 fftSize 的一半，表示可获取的频率区间数量
Uint8Array 存储 0–255 的字节数据，适合 Canvas 绘图

用 Canvas 实时绘制可视化效果

通过 requestAnimationFrame 循环读取分析数据，并在 canvas 上绘制波形或频谱柱状图。

秀脸FacePlay

一款集成AI换脸、照片跳舞等多种AI特效玩法的App

124 查看详情秀脸FacePlay

示例：绘制频谱柱状图

const canvas = document.getElementById('visualizer'); const ctx = canvas.getContext('2d'); function draw() { requestAnimationFrame(draw); analyser.getByteFrequencyData(frequencyData); // 获取频域数据 ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'rgb(0, 0, 0)'; ctx.fillRect(0, 0, canvas.width, canvas.height); const barWidth = canvas.width / bufferLength * 2.5; let x = 0; for (let i = 0; i