JSFiddle - React, Tailwind, and code Playground

by atesgoral

HTML

<canvas id="fft"></canvas>
<hr>
<button type="button" id="start">Start</button>

JavaScript

document.getElementById('start').addEventListener('click', init);
const fft = document.getElementById('fft');
const fftCtx = fft.getContext('2d');

function init() {
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then((stream) => {
			const audioCtx = new AudioContext();
      const source = audioCtx.createMediaStreamSource(stream);
      const analyser = audioCtx.createAnalyser();
      
      source.connect(analyser);
      
      const bufferLength = analyser.frequencyBinCount;
      const dataArray = new Uint8Array(bufferLength);
      
      function plot(t) {
	      requestAnimationFrame(plot);
        
        //analyser.getByteTimeDomainData(dataArray);
        analyser.getByteFrequencyData(dataArray);
        
        fftCtx.clearRect(0, 0, fft.width, fft.height);
        
        for (var i = 0; i < bufferLength; i++) {
	        fftCtx.fillRect(i, 0, 2, dataArray[i]);
				}
      }
      
      requestAnimationFrame(plot);
      
      var oscillator = audioCtx.createOscillator();
      
      oscillator.type = 'sine';
      oscillator.frequency.setValueAtTime(220, audioCtx.currentTime);
      oscillator.connect(audioCtx.destination);
      oscillator.start();      
    });
}