Web Audio API 音频可视化技术拆解与实现

• 时域数组：每个值代表当前时刻的音频振幅（0-255）
• 频域数组：每个值代表某个频率段的音量（0-255）

// 创建空的「体检报告」数组
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
// 获取频域数据（口味）
analyser.getByteFrequencyData(dataArray);
// 获取时域数据（形状）
analyser.getByteTimeDomainData(dataArray);

三、代码拆解

1. 初始化音频分析器

function initAudioAnalyzer(){
    // 1. 如果「手术室」没开，先开门
    if(!audioContext){
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
    }
    // 2. 创建「听诊器」
    analyser = audioContext.createAnalyser();
    // 3. 设置 FFT 大小（1024 是平衡精度和性能的选择）
    analyser.fftSize = 1024;
    // 4. 加平滑处理（0.6 是我试出来的最佳值，太大会迟钝，太小会抖动）
    analyser.smoothingTimeConstant = 0.6;
    // 5. 计算数组长度（FFT 大小的一半，因为频域数据是对称的）
    bufferLength = analyser.frequencyBinCount;
    // 6. 创建空的「体检报告」数组
    dataArray = new Uint8Array(bufferLength);
}

划重点：

• fftSize 必须是 2 的幂（比如 512、1024、2048），这是 FFT 算法的要求
• smoothingTimeConstant 取值 0-1，越接近 1 越平滑，越接近 0 越灵敏

2. 处理音频文件

async function processAudioFile(file){
    try{
        // 1. 先初始化「听诊器」（避免之前的 null 报错！）
        initAudioAnalyzer();
        // 2. 把文件读成 ArrayBuffer（二进制数据）
        const arrayBuffer = await readFileAsync(file);
        // 3. 解码成 AudioBuffer（「听诊器」能分析的格式）
        audioBuffer = await decodeAudioAsync(arrayBuffer);
        // 4. 更新 UI 显示歌曲信息
        updateUI(file);
        // 5. 解锁播放按钮
        playBtn.disabled = false;
    }catch(error){
        alert(`出错啦：${error.message}`);
    }
}
// 辅助函数：把文件读成 ArrayBuffer
function readFileAsync(file){
    return new Promise((resolve)=>{
        const reader = new FileReader();
        reader.onload=(e)=>resolve(e.target.result);
        reader.readAsArrayBuffer(file);
    });
}
// 辅助函数：解码成 AudioBuffer
function decodeAudioAsync(arrayBuffer){
    return new Promise((resolve)=>{
        audioContext.decodeAudioData(arrayBuffer, resolve);
    });
}

踩坑提醒：

• 一定要先调用 initAudioAnalyzer()！不然 audioContext 是 null，会报错
• 浏览器限制：decodeAudioData 必须在 AudioContext 初始化后才能调用

3. 获取数据

function animate(timestamp){
    // ... 省略帧率控制代码 ...
    if(!isPlaying) return;
    // 1. 获取最新的频域数据（口味）
    analyser.getByteFrequencyData(dataArray);
    // 2. 更新播放进度
    updateProgress(timestamp);
    // 3. 根据选择的可视化类型，把数据变成动画
    visualizationModes[visualizationType]();
    requestAnimationFrame(animate);
}

四、算法原理：FFT

你可能会好奇：AnalyserNode 是怎么把一段乱糟糟的音频，变成「低频/高频」数据的？ 答案是 FFT（快速傅里叶变换）——这是整个音频解析的「黑魔法」核心。

一段音乐，本质上是很多「不同频率的声音」叠加在一起的（比如鼓点是低频，人声是中频，镲片是高频）。 FFT 就像「筛子」，把这段混合的声音，筛成一个个「频率段」，告诉你每个频率段现在有多响。

// 比如我想让粒子只响应低频
function updateParticles(){
    particles.forEach((p, i)=>{
        // 只取前 10% 的低频数据
        const freqIndex = Math.floor(i * bufferLength * 0.1);
        const energy = dataArray[freqIndex] / 255;
        // 用低频能量控制粒子大小和速度
        p.size = p.baseSize * (1 + energy * 2);
        p.speedX *= (energy + 0.2);
    });
}

五、从数据到视觉

1. 波形图（时域数据）

function drawWaveform(){
    analyser.getByteTimeDomainData(dataArray);
    waveformCtx.clearRect(0, 0, waveformCanvas.width, waveformCanvas.height);
    waveformCtx.beginPath();
    waveformCtx.lineWidth = 2;
    waveformCtx.strokeStyle = '#C92027';
    const sliceWidth = waveformCanvas.width / bufferLength;
    let x = 0;
    // 遍历时域数据，把每个数字变成曲线上的点
    dataArray.forEach((v, i)=>{
        // 把 0-255 的数据，映射到画布的 Y 坐标（中间是 128）
        const y = (v / 128 - 1) * (waveformCanvas.height / 2) + waveformCanvas.height / 2;
        i === 0 ? waveformCtx.moveTo(x, y) : waveformCtx.lineTo(x, y);
        x += sliceWidth;
    });
    waveformCtx.stroke();
}

2. 粒子可视化（频域数据）

function updateParticles(){
    particles.forEach((p, i)=>{
        // 把粒子位置映射到频域数据的索引
        const freqIndex = Math.floor(p.x / particleCanvas.width * bufferLength);
        const energy = dataArray[freqIndex] / 255;
        // 用频域能量控制粒子运动
        p.speedX = (Math.sin(Date.now() / 1000 + i) * 0.5) * (energy + 0.1);
        p.speedY = (Math.cos(Date.now() / 1000 + i) * 0.5) * (energy + 0.1);
        p.size = p.baseSize * (1 + energy * 2);
    });
}

核心逻辑：

• 把 dataArray 里的 0-255 数值，映射 成画布的坐标、大小、颜色、速度
• 数值越大 → 元素越大/越快/越亮，反之则越小/越慢/越暗

六、技术总结

这篇拆解的价值在于：

1. 展示技术深度：懂 AudioContext、AnalyserNode、FFT 的原理，知道怎么调参数优化效果
2. 展示解决问题的能力：踩过 audioContext 未初始化的坑，知道怎么排查和解决
3. 展示工程思维：把复杂的音频解析，拆成了「初始化→处理文件→获取数据→渲染」四个清晰的模块，代码可维护、可拓展

技术是把抽象声音变成具象视觉的魔法棒。