音频可视化通过Web Audio API获取频率和波形数据，结合Canvas实时绘制频谱或波形图。首先创建AudioContext并连接analyser节点，设置fftSize；然后加载音频或使用麦克风输入，调用getByteFrequencyData或getByteTimeDomainData获取数据；最后在requestAnimationFrame循环中用Canvas绘制柱状图或波形。关键步骤包括初始化音频上下文、获取分析数据、持续更新视觉渲染，从而实现动态音频图形展示。
音频可视化是通过JavaScript分析音频数据，并将其转化为图形展示的过程。借助Web Audio API，你可以轻松获取音频的频率、波形等信息，并用Canvas或SVG实时绘制出来。以下是实现音频可视化的核心步骤和代码示例。
1. 初始化音频上下文并加载音频
要进行音频分析，首先需要创建一个AudioContext，并将音频源连接到分析器节点。
const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const analyser = audioContext.createAnalyser(); analyser.fftSize = 2048; // 设置FFT大小，决定频率分辨率 const bufferLength = analyser.frequencyBinCount; const dataArray = new Uint8Array(bufferLength);// 加载音频文件（也可以使用麦克风输入） async function loadAudio(url) { const response = await fetch(url); const arrayBuffer = await response.arrayBuffer(); const audioBuffer = await audioContext.decodeAudioData(arrayBuffer); const source = audioContext.createBufferSource(); source.buffer = audioBuffer; source.connect(analyser); analyser.connect(audioContext.destination); source.start(); return source; }
2. 获取音频数据
analyser节点提供两种主要数据：时域数据（波形）和频域数据（频率分布）。常用的是getByteFrequencyData()和getByteTimeDomainData()。
// 获取频率数据（用于柱状图） analyser.getByteFrequencyData(dataArray);// 获取波形数据（用于波浪图） analyser.getByteTimeDomainData(dataArray);
3. 使用Canvas绘制可视化效果
将获取到的数据绘制在canvas上，可以实现多种视觉效果，比如频谱柱状图或波形图。
立即学习“Java免费学习笔记（深入）”；
频谱柱状图示例：
const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');
function drawSpectrum() {
requestAnimationFrame(drawSpectrum);
analyser.getByteFrequencyData(dataArray);
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 = dataArray[i] / 255 * canvas.height;
ctx.fillStyle = rgb(${barHeight + 100}, 50, 50);
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
x += barWidth + 1;
}
}
// 开始可视化
loadAudio('your-audio-file.mp3').then(() => {
drawSpectrum();
});
4. 可选：使用麦克风输入
除了播放音频文件，还可以实时分析麦克风输入的音频流。
async function startMicVisualizer() {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const source = audioContext.createMediaStreamSource(stream);
source.connect(analyser);
analyser.connect(audioContext.destination);
// 然后调用drawSpectrum或其他绘图函数
drawSpectrum();
}
基本上就这些。只要掌握Web Audio API的基本结构，结合Canvas绘图能力，就能实现丰富的音频可视化效果。关键在于持续从analyser获取数据并在动画循环中更新画面。
