Skip to content

음향계를 이용한 사용자 볼륨 측정

shinhyogeun edited this page Nov 24, 2021 · 4 revisions

화상통화에서 사용자가 말하는 동안에 사용자의 비디오 테두리를 파랗게 바꿔줘야하는 기능이 있었습니다. 다른 사람들의 소리 크기는 **getSynchronizationSources**라는 함수를 통해서 쉽게 구할 수 있었지만 정작 자신의 소리 크기를 구하는 방법이 찾기 쉽지 않아서 음향계를 만드는 코드를 참조하여 자신의 말소리 크기를 구현하고자 하였습니다.

구현과정

  1. 주파수를 얻을 수 있게 해주는 **Analyser**를 이용했습니다. (AudioConext의 함수로 생성)
  2. Analyser을 **MediaStreamAudioSourceNode**에 장착하여 음향계처럼 사용할 수 있게 했습니다.
  3. **onaudioprocess** 이벤트를 걸어서 일정한 간격으로 Buffer길이에 해당하는 배열을 생성합니다.
  4. getByteFrequencyData() 메서드로 오디오 트랙의 각 주파수에 대한 데시벨 데이터를 배열에 복제하고 배열의 평균을 이용해서 소리의 크기를 판별합니다.
  5. 너무 자주 **onaudioprocess** 이벤트가 실행되기에 쓰로틀링을 걸어서 효율성을 증가시켰습니다.

결과

  • 자신이 말을 할 경우에도 자신의 음량을 인식할 수 있었습니다.
  • 이에따라 테두리를 이쁘게 그려줄 수 있었습니다.
  • AudioContext밑 주파수 관련 함수들을 배울 수 있었습니다!
  • 직접 구글의 깃허브 WEB RTC 예시 코드를 보면서 참조하면서 진행하였습니다.
Clone this wiki locally