audio_spectrum.js

const audio = new AudioContext(),
      sound = audio.createMediaStreamSource(stream),
      analyser = audio.createAnalyser();
analyser.minDecibels = -60;
// microphone -> filter -> destination.
sound.connect(analyser);
analyser.connect(audio.destination);

const frequencyData = new Uint8Array(analyser.frequencyBinCount).slice(0, 32),
      spectrum = document.querySelector('#spectrum');
const frequencies = frequencyData.map((_, i) => {
  spectrum.appendChild(document.createElement('DIV'));
  return i * audio.sampleRate/analyser.fftSize
})
const bars = document.querySelectorAll("#spectrum > div");
let avg = 0;

function renderFrame() {
  requestAnimationFrame(renderFrame);
  // update data in frequencyData
  analyser.getByteFrequencyData(frequencyData);
  // render frame based on values in frequencyData
  let sums = 0, total = 0.001;
  frequencyData.forEach((fd, i) => {
    bars[i].style.height = fd + "px";
    sums += fd * frequencies[i];
    total += fd;
    bars[i].style.backgroundColor = "hsl(" + ~~avg + ",60%,70%)";
  })
  avg = sums / total;
}
renderFrame();