需要使用HTML5 canvas + web audio API协助音频可视化工具

Question

我正在寻找使用canvas和web音频API制作简单的音频可视化工具。我在网上找到了这个例子，想要深入了解代码的每个部分究竟在做什么。我对一些事情有所了解。

同样重要的是，我也希望改变画布背景颜色，但还是成功地试图这样做。

var analyser, canvas, ctx, random = Math.random, circles = [];

window.onload = function() {
    canvas = document.createElement('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    document.body.appendChild(canvas);
    ctx = canvas.getContext('2d');

    setupWebAudio();

    for (var i = 0; i < 280; i++) {
        circles[i] = new Circle();
        circles[i].draw();
    }
    draw();
};

function setupWebAudio() {
    var audio = document.createElement('audio');
    audio.src = 'flume.mp3';
    document.body.appendChild(audio);

    var audioContext = new AudioContext();
    analyser = audioContext.createAnalyser();
    var source = audioContext.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(audioContext.destination);
    audio.play();
}

function draw() {
    requestAnimationFrame(draw);
    var freqByteData = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(freqByteData);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 1; i < circles.length; i++) {
        circles[i].radius = freqByteData[i] * 1;
        circles[i].y = circles[i].y > canvas.height ? 0 : circles[i].y + 1;
        circles[i].draw();
    }
}

function getRandomColor(){
    return random() * 1 >> 0;
}

function Circle() {
    this.x = random() * canvas.width;
    this.y = random() * canvas.height;
    this.radius = random() * 20 + 20;
    this.color = 'rgb(' + getRandomColor() + ',' + getRandomColor() + ',' + 
    getRandomColor() + ')';    
}

Circle.prototype.draw = function() {
    var that = this;
    ctx.save();
    ctx.beginPath();
    ctx.globalAlpha = random() / 8 + 0.2;
    ctx.arc(that.x, that.y, that.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.restore();
}

Answer 1

更改draw（）函数中的颜色。

此行创建一个矩形作为背景。

ctx.clearRect(0, 0, canvas.width, canvas.height);

就在它之前，设置颜色，例如：

ctx.fillStyle = rgb(1, 2, 3);
ctx.clearRect(0, 0, canvas.width, canvas.height);