当前位置：首页 > 文章列表 > 文章 > 前端 > Web音频可视化技巧全解析

Web音频可视化技巧全解析

2025-11-08 21:27:59 0浏览收藏

创建音频上下文并加载音频

所有 Web Audio 操作都从一个 AudioContext 开始。你需要创建上下文，然后加载或捕获音频源。

使用 new AudioContext() 初始化上下文
通过 fetch 加载音频文件，解码成音频缓冲区（AudioBuffer）
用 createBufferSource() 创建音频源节点

示例代码：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
let source;
async function loadAudio(url) {
const response = await fetch(url);
const arrayBuffer = await response.arrayBuffer();
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
return audioBuffer;
}

设置 AnalyserNode 获取音频数据

AnalyserNode 是实现可视化的关键。它能实时提供时域和频域的数据。

使用 audioContext.createAnalyser() 创建分析节点
将音频源连接到分析节点，再连接到扬声器（destination）
配置 FFT 大小（如 fftSize = 2048）控制频率分辨率
通过 getByteFrequencyData() 或 getByteTimeDomainData() 获取数据数组

连接示例：

const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const frequencyData = new Uint8Array(bufferLength);
source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(analyser);
analyser.connect(audioContext.destination);

使用 Canvas 绘制可视化图形

拿到音频数据后，可以用 Canvas 实时绘制波形或频谱图。

获取 canvas 元素并设置绘图上下文
在动画循环中（requestAnimationFrame）不断读取分析数据
清空画布，遍历数据数组，绘制线条或柱状图

绘制频谱柱状图示例：

const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');
function draw() {
requestAnimationFrame(draw);
analyser.getByteFrequencyData(frequencyData);
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 < bufferLength; i++) {
const barHeight = frequencyData[i] / 255  canvas.height;
ctx.fillStyle = `rgb(${barHeight  3}, 100, 200)`;
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
x += barWidth + 1;
}
}
draw();