1

This code plot a linear sequence of frequency data in a canvas object. How to visualize the frequency in a logarithmic X axis using getByteFrequencyData in a webaudio context? 

var analyser = audioContext.createAnalyser();
[...]
frameLooper(); 

function frameLooper(){
    window.requestAnimationFrame(frameLooper);
    fbc_array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbc_array);
    canvas.width = fbc_array.length;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    bar_width = 2;

    for (var i = 0; i < fbc_array.length; i++) {
        bar_x = i;
        bar_height = -fbc_array[i];
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
    }
}
Carlo Peluso
  • 41
  • 7

1 Answers1

0

Took me a while to figure this out, but to spread the bars out logarithmically, you have to calculate the x value like this:

bar_x = Math.log(i) / Math.log(analyser.frequencyBinCount) * canvas.width
Solatic
  • 1
  • 1