van an nguyen

2D real time visualization: frequencies

2D real time visualization: frequencies

First typical example

Example at JSBin:

audio player with frequency visualisations with red barsfrequency viualisation this time fftsize = 64

This time, instead of a waveform we want to visualize an animated bar chart. Each bar will correspond to a frequency range and ‘dance’ in concert with the music being played.

    • The frequency range depends upon the sample rate of the signal (the audio source) and on the FFT size. While the sound is being played, the values change and the bar chart is animated.
    • The number of bars is equal to the FFT size / 2 (left screenshot with size = 512, right screenshot with size = 64).
    • In the example above, the Nth bar (from left to right) corresponds to the frequency range N * (samplerate/fftSize). If we have a sample rate equal to 44100 Hz and a FFT size equal to 512, then the first bar represents frequencies between 0 and 44100/512 = 86.12Hz. etc. As the amount of data returned by the analyser node is half the fft size, we will only be able to plot the frequency-range to half the sample rate. You will see that this is generally enough as frequencies in the second half of the sample rate are not relevant.
    • The height of each bar shows the strength of that specific frequency bucket. It’s just a representation of how much of each frequency is present in the signal (i.e. how “loud” the frequency is).

You do not have to master the signal processing ‘plumbing’ summarised above – just plot the reported values!

Enough said! Let’s study some extracts from the source code. 

This code is very similar to Example 1 at the top of this page. We’ve set the FFT size to a lower value, and rewritten the animation loop to plot frequency bars instead of a waveform:

  1. function buildAudioGraph() {
  2.   …
  3.   // Create an analyser node
  4.   analyser = audioContext.createAnalyser();
  6.   // Try changing to lower values: 512, 256, 128, 64…
  7.   // Lower values are good for frequency visualizations,
  8.   // try 128, 64 etc.? 
  9.   analyser.fftSize = 256;
  10.   …
  11. }

This time, when building the audio graph, we have used a smaller FFT size. Values between 64 and 512 are very common here. Try them in the JSBin example! Apart from the lines in bold, this function is exactly the same as in Example 1.

The new visualization code:

  1. function visualize() {
  2.   // clear the canvas
  3.   canvasContext.clearRect(0, 0, width, height);
  5.   // Get the analyser data
  6.   analyser.getByteFrequencyData(dataArray);
  8.   var barWidth = width / bufferLength;
  9.   var barHeight;
  10.   var x = 0;
  12.   // values go from 0 to 255 and the canvas heigt is 100. Let’s rescale
  13.   // before drawing. This is the scale factor
  14.   heightScale = height/128;
  16.   for(var i = 0; i < bufferLength; i++) {
  17.     // between 0 and 255
  18.     barHeight = dataArray[i];
  20.     // The color is red but lighter or darker depending on the value
  21.     canvasContext.fillStyle = ‘rgb(‘ + (barHeight+100) + ‘,50,50)’;
  22.     // scale from [0, 255] to the canvas height [0, height] pixels
  23.     barHeight *= heightScale;
  24.     // draw the bar
  25.     canvasContext.fillRect(x, height–barHeight/2, barWidth, barHeight/2);
  27.     // 1 is the number of pixels between bars – you can change it
  28.     x += barWidth + 1;
  29.   }
  31.   // once again call the visualize function at 60 frames/s
  32.   requestAnimationFrame(visualize);
  33. }

Explanations: 

    • Line 6: this is different to code which draws a waveform! We ask for byteFrequencyData (vs byteTimeDomainData earlier) and it returns an array of fftSize/2 values between 0 and 255.
    • Lines 16-29: we iterate on the value. The x position of each bar is incremented at each iteration (line 28) adding a small interval of 1 pixel between bars (you can try different values here). The width of each bar is computed at line 8.
    • Line 14: we compute a scale factor to be able to display the values (ranging from 0 to 255) in direct proportion to the height of the canvas. This scale factor is used in line 23, when we compute the height of the bars we are going to draw.

Another example: achieving more impressive frequency visualization

Example at JSBin with a different look for the visualization: The example is given as is, read the source code and try to understand how the drawing of the frequency is done.

Same example as before but with symmetric and colored frequency visualisations

Last example at JSBin with this time the graphic equalizer,  a master volume (gain) and a stereo panner node just before the visualizer node:

Previous example with a master volume (gain node) and the equalizer + a stereoPanner node

And here is the audio graph for this example:

audio graph from above example

Source code from this example’s the buildAudioGraph function:

  1. function buildAudioGraph() {
  2.    var mediaElement = document.getElementById(‘player’);
  3.    var sourceNode = audioContext.createMediaElementSource(mediaElement);
  5.    // Create an analyser node
  6.   analyser = audioContext.createAnalyser();
  8.   // Try changing for lower values: 512, 256, 128, 64…
  9.   analyser.fftSize = 1024;
  10.   bufferLength = analyser.frequencyBinCount;
  11.   dataArray = new Uint8Array(bufferLength);
  13.   // Create the equalizer, which comprises a set of biquad filters
  14.   // Set filters
  15.   [60, 170, 350, 1000, 3500, 10000].forEach(function(freq, i) {
  16.      var eq = audioContext.createBiquadFilter();
  17.      eq.frequency.value = freq;
  18.      eq.type = “peaking”;
  19.      eq.gain.value = 0;
  20.      filters.push(eq);
  21.    });
  23.    // Connect filters in sequence
  24.    sourceNode.connect(filters[0]);
  25.    for(var i = 0; i < filters.length – 1; i++) {
  26.      filters[i].connect(filters[i+1]);
  27.    }
  29.    // Master volume is a gain node
  30.    masterGain = audioContext.createGain();
  31.    masterGain.value = 1;
  33.    // Connect the last filter to the speakers
  34.    filters[filters.length – 1].connect(masterGain);
  36.    // for stereo balancing, split the signal
  37.    stereoPanner = audioContext.createStereoPanner();
  38.    // connect master volume output to the stereo panner
  39.    masterGain.connect(stereoPanner);
  41.    // Connect the stereo panner to analyser and analyser to destination
  42.    stereoPanner.connect(analyser);
  43.    analyser.connect(audioContext.destination);
  44. }

Leave a comment