브라우저에서 마이크 입력을 실시간으로 분석하여 시각화하는 방법

13 Oct 2023

javascript

브라우저에서 마이크 입력을 실시간으로 분석하고 시각화하는 것은 오디오 처리와 웹 기술을 결합한 기능입니다. 이를 위해 다음과 같은 단계를 따를 수 있습니다.

1. 오디오 입력 받기

먼저, 웹 브라우저에서 오디오 입력을 받기 위해 웹 오디오 API인 getUserMedia를 사용합니다. 이를 이용해 사용자의 마이크에 접근하여 오디오 스트림을 가져올 수 있습니다.

navigator.getUserMedia =
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia ||
  navigator.msGetUserMedia;

navigator.getUserMedia(
  { audio: true },
  function(stream) {
    // 오디오 스트림 가져오기 성공
    var audioContext = new (window.AudioContext || window.webkitAudioContext)();
    var audioInput = audioContext.createMediaStreamSource(stream);
    // 분석을 위한 오디오 노드 생성 및 연결
    var analyser = audioContext.createAnalyser();
    audioInput.connect(analyser);
    // 시각화를 위한 캔버스 설정
    var canvas = document.getElementById('visualizer');
    var canvasContext = canvas.getContext('2d');
    var bufferLength = analyser.frequencyBinCount;
    var dataArray = new Uint8Array(bufferLength);
    // 분석 및 시각화 실행
    function visualize() {
      requestAnimationFrame(visualize);
      analyser.getByteTimeDomainData(dataArray);
      // 분석된 데이터를 시각화하여 캔버스에 표시
      // ...
    }
    visualize();
  },
  function(error) {
    // 오디오 스트림 가져오기 실패
    console.error('Error accessing audio input: ' + error);
  }
);

위의 코드에서는 getUserMedia 함수를 사용하여 오디오 스트림을 가져오고, AudioContext를 생성하여 연결합니다. 그리고 오디오를 분석하기 위한 AnalyserNode도 생성하고 연결합니다. 마지막으로 분석 결과를 캔버스에 시각화하기 위해 visualize 함수를 정의하고 실행합니다.

2. 데이터 분석 및 시각화

실시간으로 받은 오디오 데이터를 분석하고 시각화하는 부분은 visualize 함수 내부에 구현됩니다. 분석된 데이터는 getByteTimeDomainData 메서드를 이용해 dataArray에 저장됩니다. 이 데이터를 시각화하여 캔버스에 표시해야 합니다.

시각화 방법은 다양한데, 예를 들어 canvasContext.fillRect 메서드를 사용하여 양의 값을 가진 데이터 요소마다 캔버스에 사각형을 그리는 방식으로 할 수 있습니다. 또는 canvasContext.lineTo 메서드와 canvasContext.stroke 메서드를 사용하여 데이터 값을 선으로 연결하는 방식도 가능합니다. 원하는 시각화 방법에 따라 캔버스에 그리는 코드를 작성하면 됩니다.

3. 시각화 결과 확인 및 활용

위의 코드에서 시각화 결과는 visualizer라는 id를 가진 캔버스 요소에 표시됩니다. 따라서 원하는 위치에 적절한 크기로 캔버스를 만들어 주어야 합니다.

<canvas id="visualizer"></canvas>

위의 코드를 HTML 파일에 추가하고 웹 브라우저에서 실행하면 오디오 입력을 실시간으로 분석하여 시각화하는 기능을 확인할 수 있습니다.

이와 같은 방식으로 브라우저에서 마이크 입력을 실시간으로 분석하여 시각화할 수 있습니다.