Chrome上でgetUserMedia()するときに、マイク音量を調整するメモ。
https://github.com/khwada/getusermedia_gain_microphone
Audio録音
getUserMedia()で取得したstreamをgainNodeを通して変換したstreamを録音する。
録音中にスライダーを触ってgainを変更しても、そこから音量変更が反映される。
microphone_gain_audio.html
const audioContext = new AudioContext();
const gainNode = audioContext.createGain();
const microphoneLevel = document.getElementById('microphoneLevel');
const microphoneLevelText = document.getElementById('microphoneLevelText');
microphoneLevel.addEventListener('change', (e) => {
const value = e.target.value;
console.log(`gain: ${value}`);
gainNode.gain.value = value;
microphoneLevelText.innerText = value;
});
microphoneLevel.value = gainNode.gain.value;
const changeEvent = new Event('change');
microphoneLevel.dispatchEvent(changeEvent);
const record = document.getElementById('record');
const stop = document.getElementById('stop');
stop.disabled = true;
let chunks = [];
navigator.mediaDevices.getUserMedia({audio: true}).then((stream) => {
const source = audioContext.createMediaStreamSource(stream);
const audioDestination = audioContext.createMediaStreamDestination();
source.connect(gainNode);
gainNode.connect(audioDestination);
const mediaRecorder = new MediaRecorder(audioDestination.stream);
.....
Video録画
同様にgainNodeを通したAudioと、getUserMedia()から取得したVideoTrackとから、新たなstreamを生成して録画する。
microphone_gain_video.html
navigator.mediaDevices.getUserMedia({audio: true, video: true}).then((stream) => {
const source = audioContext.createMediaStreamSource(stream);
const destination = audioContext.createMediaStreamDestination();
source.connect(gainNode);
gainNode.connect(destination);
destination.stream.addTrack(stream.getVideoTracks()[0]);
const mediaRecorder = new MediaRecorder(destination.stream);
.....