如何用Web Audio API构建一个音频可视化器？

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

<audio>

<audio id="myAudio" src="path/to/your/audio.mp3" controls crossorigin="anonymous"></audio>
<canvas id="myCanvas"></canvas>

const audioElement = document.getElementById('myAudio');
const source = audioContext.createMediaElementSource(audioElement);

crossorigin="anonymous"

AnalyserNode

AnalyserNode

const analyser = audioContext.createAnalyser();
// 连接：音频源 -> 分析器 -> 扬声器（可选，但通常需要让用户听到声音）
source.connect(analyser);
analyser.connect(audioContext.destination);

AnalyserNode

analyser.fftSize = 2048; // 决定了频率数据的精细程度，必须是2的幂
const bufferLength = analyser.frequencyBinCount; // 实际可用的频率数据点数量，等于fftSize / 2
const dataArray = new Uint8Array(bufferLength); // 用于存储频率数据的数组

const canvas = document.getElementById('myCanvas');
const canvasCtx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 2; // 随便给个高度，实际项目需要响应式处理

function draw() {
    requestAnimationFrame(draw); // 循环调用，优化动画性能

    analyser.getByteFrequencyData(dataArray); // 获取频率数据

    canvasCtx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
    canvasCtx.fillStyle = 'rgb(0, 0, 0)'; // 背景色
    canvasCtx.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] / 2; // 简单地将数据映射到高度

        canvasCtx.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)'; // 柱子颜色
        canvasCtx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);

        x += barWidth + 1;
    }
}

// 确保音频播放时才开始绘制
audioElement.onplay = () => {
    if (audioContext.state === 'suspended') {
        audioContext.resume(); // 解决浏览器自动播放策略问题
    }
    draw();
};

getByteTimeDomainData

AnalyserNode

fftSize

fftSize

frequencyBinCount

smoothingTimeConstant

minDecibels

maxDecibels

AnalyserNode

getByteFrequencyData

getByteTimeDomainData

Uint8Array

AudioNode

AudioContext

<audio>

audioContext.createMediaElementSource(audioElement)

MediaElementAudioSourceNode

FileReader

audioContext.decodeAudioData()

AudioBuffer

audioContext.createBufferSource()

// 示例：从文件输入中读取
const fileInput = document.getElementById('fileInput');
fileInput.onchange = async (e) => {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = async (event) => {
            const audioBuffer = await audioContext.decodeAudioData(event.target.result);
            const source = audioContext.createBufferSource();
            source.buffer = audioBuffer;
            source.connect(analyser); // 连接到分析器
            source.connect(audioContext.destination);
            source.start(0); // 立即播放
        };
        reader.readAsArrayBuffer(file);
    }
};

decodeAudioData

async/await

navigator.mediaDevices.getUserMedia()

MediaStream

audioContext.createMediaStreamSource(stream)

MediaStreamAudioSourceNode

// 示例：获取麦克风输入
async function getMicInput() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        const source = audioContext.createMediaStreamSource(stream);
        source.connect(analyser);
        analyser.connect(audioContext.destination); // 麦克风输入通常也需要连接到扬声器，否则你听不到自己说话
        // 开始绘制
        draw();
    } catch (err) {
        console.error('获取麦克风失败:', err);
        alert('无法访问麦克风。请检查权限设置。');
    }
}
// 比如点击一个按钮后调用 getMicInput()

getUserMedia