均匀分配频率到画布音频分析器

Question

我有这个分析器(来自一个教程)：

var playerE = document.getElementsByClassName('player')[0];;
var analyser = document.getElementById('analyzer');
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;

window.addEventListener("load", playAnalyzer, false);

function playAnalyzer() {
    context = new AudioContext();
    analyser = context.createAnalyser();
    canvas = document.getElementById('analyzer');
    ctx = canvas.getContext('2d');
    source = context.createMediaElementSource(playerE);
    source.connect(analyser);
    analyser.connect(context.destination);
    frameLooper();
}

function frameLooper() {
    canvas.width  = 800;
    canvas.height = 400;
    ctx.imageSmoothingEnabled = false;
    window.requestAnimationFrame(frameLooper);
    fbc_array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbc_array);
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    ctx.fillStyle = "white"; // Color of the bars
    bars = 700;
    for (var i = 0; i < bars; i++) {
        bar_x = i * 5;
        bar_width = 3;
        bar_height = -(fbc_array[i] / 2);
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
    }
}

现在它运行得很好，我面临的唯一问题是频率。因为它是根据每一个频率增加条子，当条子的宽度和间距大于1时，更高的频率就被忽略了。如何将频率均匀地分配给设置的条数(bars=700)？

我还想知道，除了频率体积之外，我如何在高度上增加2px呢？(这样分析仪就不会在没有声音的情况下就坏掉了)

Answer 1

我自己发现的，这是怎么回事。

因为for循环考虑到了每一个频率，所以只需跳过每个循环4小节。就像这样：

for (var i = 0; i < bars; i += 4) /*<-- Adding 4 instead of 1*/ {
        bar_x = i * 1;
        bar_width = 3;
        bar_height = -3 - (fbc_array[i] / 2);
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
    }

你必须调整条形图的数量、宽度和x。为了抵消条形图上的高度，只需从如图所示的“条形高度”中减去任何值。在这个例子中，我要减去3。

就这样！