マイク入力をFFTで解析してビジュアライズする 🎙

blog.kimizuka.org

以前、音源をFFT解析するデモを作ったときは、事前にホスティングしてあったmp3を解析しましたが、今回は、MediaDevices.getUserMedia をつかって、ブラウザからマイクにアクセスし、マイク入力をリアルタイムにFFTで解析してビジュアライズするデモを作りました。ChromeとSafariで動作確認しています。

DEMO

develop.kimizuka.org

JavaScript

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: false
}).then(function(stream) {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  const source = audioCtx.createMediaStreamSource(stream);
  const analyser = audioCtx.createAnalyser();
  const LENGTH = 32;
  const data = new Uint8Array(LENGTH);

  analyser.fftSize = 1024;

  source.connect(analyser);

  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  tick();

  function tick() {
    canvas.width = canvas.width;
    canvas.height = canvas.height;

    ctx.fillStyle = '#3e3e3e';

    const w = canvas.width / LENGTH;

    analyser.getByteFrequencyData(data);

    for (let i = 0; i < LENGTH; ++i) {
      ctx.rect(i * w, canvas.height - data[i], w, data[i]);
    }

    ctx.fill();

    requestAnimationFrame(tick);
  }
}).catch(function(err) {
  console.error(err);
});