Web Audio API 音乐可视化技术拆解：从音频解析到动效实现

注意：fftSize 必须是 2 的幂；smoothingTimeConstant 取值 0-1。

2. 处理音频文件

用户上传后需解码为 AudioBuffer。

async function processAudioFile(file) {
    try {
        initAudioAnalyzer();
        const arrayBuffer = await readFileAsync(file);
        audioBuffer = await decodeAudioAsync(arrayBuffer);
        updateUI(file);
        playBtn.disabled = false;
    } catch (error) {
        alert(`出错啦：${error.message}`);
    }
}

function readFileAsync(file) {
    return new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = (e) => resolve(e.target.result);
        reader.readAsArrayBuffer(file);
    });
}

function decodeAudioAsync(arrayBuffer) {
    return new Promise((resolve) => {
        audioContext.decodeAudioData(arrayBuffer, resolve);
    });
}

3. 动画循环与数据获取

在 requestAnimationFrame 中持续获取最新数据并渲染。

function animate(timestamp) {
    if (!isPlaying) return;
    analyser.getByteFrequencyData(dataArray);
    updateProgress(timestamp);
    visualizationModes[visualizationType]();
    requestAnimationFrame(animate);
}

三、算法原理：FFT 快速傅里叶变换

FFT 将混合声音筛成不同频率段。

• 低频段数值飙升 → 粒子跳动（鼓点）
• 高频段数值飙升 → 粒子闪烁（镲片）
• 中频段变化 → 波形起伏（人声）

// 粒子响应低频示例
function updateParticles() {
    particles.forEach((p, i) => {
        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);
    });
}

四、数据到视觉映射

将 0-255 数值映射为画布坐标、大小、颜色或速度。

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) => {
        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);
    });
}

五、总结

通过合理配置 AudioContext 与 AnalyserNode，结合 FFT 算法与 Canvas 渲染，可实现高质量的音频可视化效果。关键在于理解频域与时域数据的差异，并根据业务需求调整参数以平衡性能与视觉效果。