js实现音乐波动

实现音乐波动的 JavaScript 方法

使用 Web Audio API 和 Canvas 可以创建一个音乐波动效果。以下是实现的基本步骤：

创建音频上下文和分析器

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
analyser.fftSize = 256;

连接音频源

// 假设有一个音频元素
const audioElement = document.querySelector('audio');
const source = audioContext.createMediaElementSource(audioElement);
source.connect(analyser);
analyser.connect(audioContext.destination);

设置 Canvas 绘制

const canvas = document.getElementById('visualizer');
const canvasCtx = canvas.getContext('2d');
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

绘制波动效果

function draw() {
    requestAnimationFrame(draw);
    analyser.getByteFrequencyData(dataArray);

    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;
    }
}
draw();

圆形波动效果实现

function drawCircle() {
    requestAnimationFrame(drawCircle);
    analyser.getByteFrequencyData(dataArray);

    canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = 50;

    canvasCtx.beginPath();
    canvasCtx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    canvasCtx.strokeStyle = '#fff';
    canvasCtx.stroke();

    for(let i = 0; i < bufferLength; i++) {
        const angle = (i * Math.PI * 2) / bufferLength;
        const amplitude = dataArray[i] / 255 * 100;
        const x = centerX + Math.cos(angle) * (radius + amplitude);
        const y = centerY + Math.sin(angle) * (radius + amplitude);

        if(i === 0) {
            canvasCtx.moveTo(x, y);
        } else {
            canvasCtx.lineTo(x, y);
        }
    }

    canvasCtx.closePath();
    canvasCtx.fillStyle = 'rgba(0, 255, 255, 0.3)';
    canvasCtx.fill();
}
drawCircle();

使用第三方库

对于更复杂的效果，可以考虑使用以下库：

• wavesurfer.js
• p5.sound
• tone.js

这些库提供了更高级的音频可视化功能，可以轻松创建各种波动效果。

注意事项

确保在用户交互后启动音频上下文，现代浏览器要求音频上下文必须在用户手势（如点击）后创建。可以添加如下代码：

document.body.addEventListener('click', () => {
    audioContext.resume();
}, { once: true });

这些方法提供了从简单到复杂的音乐波动效果实现方式，可以根据需求选择适合的方案。