JS) AudioContext 음소거(mute)

브라우저에서 AudioContext를 활용할때 gainNode를 이용해서 오디오의 볼륨을 조절할 수 있습니다.

 

HTML의 <audio>태그 보다 훨씬더 많은 작업을 할 수 있습니다.

유튜브 영상을 올리고 BGM을 중간에 넣을때 어떤 소리를 더 크게 넣나 섞는 기능도 있는데 해당기능에 AudioContext가 활용될겁니다.

 

아래와 같이 퍼센트라고 생각하면 좋습니다.

gainNode.gain.value : 1

0 = 0 %

1 = 100 %

2 = 200 %

 

이 글은 gainNode mute가 안될때 해결방법을 알려주는 글이 될수도 있겠습니다.

 

공식적으로 함수 설명이 잘 되어있는게 아니라 이런 함수가 있다 정도로만 작성된 문서가 많아 IE를 제외한 모든 브라우저를 지원하는데도 잘 쓰이는것 같지는 않습니다.

 

함수에 대해 설명이 부족해 잘못작성한 예시와 제대로 작동하는 코드를 모두 준비했습니다.

 

잘못작성한 예시 (Wrong Example)

bufferSource.connect(audioContext.destination);

gainNode=audioContext.createGain();
bufferSource.connect(gainNode);
gainNode.connect(audioContext.destination);
gainNode.gain.value = 0;

이렇게 작성된 경우 소리가 조금 작아지는 현상이 있을 수 있습니다. 안작아지는건 아닌데 조금 줄어서 애매하더라고요.

 

버퍼소스(원본)이 오디오에 병렬로 연결되어 gainNode의 제어를 받을 수 없습니다.

bufferSource	audioContext.destination
gainNode

 

 

제대로 작성한 예시 (Right Example)

gainNode=audioContext.createGain();
bufferSource.connect(gainNode);
gainNode.connect(audioContext.destination);
gainNode.gain.value = 0;

bufferSource

gainNode

audioContext.destination

bufferSource(원본)가 -> gainNode(증폭)를 거쳐 -> AudioContext로 전달되어 음소거및 소리 증폭을 할 수 있습니다.

 

 

따로 오디오 지식도 없었고, 문서도 부족하여 찾아봐도 안나오길래 크롬 디버거로 혼자 찾아보다가 해결한 문제입니다.

 

AudioContext 관련 정보가 많이 없기 때문에 AudioContext 소리조절/음소거를 하고 싶을때 도움이 되셨으면 합니다.