웹 페이지에서 마이크를 통해 음성을 입력받고, 볼륨을 시각화 하는 과정을 정리합니다.

바닐라로 개발한 예제코드는 아래에서 확인할 수 있습니다. https://codepen.io/vchgekmq-the-flexboxer/pen/MWLVJeO?editors=1111

• JS 코드 미리 보기

<aside> 📝 목차

</aside>

1. 마이크를 통해 사용자의 음성을 입력 받기

navigator.mediaDevices
    .getUserMedia({ audio: true }) // 마이크 권한을 요청
    .then((stream) => {            // 마이크 권한 요청 성공
      isReording = true;
      audioStream = stream;
		})

		//
		// (볼륨 시각화 코드)
		//

		.catch((error) => {
			console.error("마이크 권한 획득 실패", error);
		});
};

우선 navigator.mediaDevices.getUserMedia({ audio: true }) 는 사용자에게 마이크 권한을 요청하는 부분입니다.

• navigator.mediaDevices.getUserMedia({ audio: true })

  • 사용자에게 마이크 권한을 요청하는 부분입니다.
  • Web API인 MediaDevices의 getUserMedia 메서드를 호출하는 방식으로 작동합니다.
    • MediaDevices api 설명은 아래 링크를 참조하세
    • https://developer.mozilla.org/ko/docs/Web/API/MediaDevices
  • 각 객체와 프로퍼티 설명은 다음과 같습니다.
    • navigator 객체 : 브라우저의 정보와 상태에 액세스할 수 있는 객체
    • mediaDevices : 미디어 장치(예: 카메라, 마이크)에 액세스하기 위한 API 제공
    • getUserMedia()메서드 : 사용자의 미디어 디바이스(카메라, 오디오..)에 액세스할 수 있도록 권한을 요청하는 메서드입니다. { audio: true }를 전달하여 오디오 권한을 요청합니다 장치의 입력 데이터를 비디오/오디오 트랙으로 포함한 ``을 반환합니다.

• .then((stream) => {})

  • 사용자가 오디오 권한을 수락하면 실행됩니다.
  • getUserMedia() 의 반환값으로 받은 MediaStream을 가지고 작업을 시작합니다.
  • MediaStream에 대해 간단히 설명하면,
    • 오디오나 비디오와 같은 미디어 데이터를 표현하는 객체입니다
    • 실시간으로 생성되고 내용이 지속적으로 업데이트되므로, 실시간 오디오 및 비디오를 다룰 때 사용합니다.
    • 비디오/오디오 두가지 트랙으로 구성되어 있습니다.
    • https://developer.mozilla.org/en-US/docs/Web/API/MediaStream

2. 입력된 오디오 볼륨을 정규화 하기

const context = new AudioContext();
const analyser = context.createAnalyser();
const mediaStreamAudioSourceNode = context.createMediaStreamSource(stream);
mediaStreamAudioSourceNode.connect(analyser, 0);
const pcmData = new Float32Array(analyser.fftSize);

const onFrame = () => {
  analyser.getFloatTimeDomainData(pcmData);
  let sum = 0.0;
  for (const amplitude of pcmData) {
    sum += amplitude * amplitude;
  }
  const rms = Math.sqrt(sum / pcmData.length);
  const normalizedVolume = Math.min(1, rms / 0.5);
  colorVolumeMeter(normalizedVolume);
  onFrameId = window.requestAnimationFrame(onFrame);
};

onFrameId = window.requestAnimationFrame(onFrame);

사용자가 입력하는 오디오의 볼륨을 0~1 사이의 값으로 정규화 하는 과정입니다.