자바스크립트 예제: 마이크 테스트

출처 바로가기

자바스크립트에서 마이크를 사용하려면 먼저 사용자로부터 마이크 사용 권한을 획득해야 합니다.

여기서 사용자가 허용 버튼을 눌러야 이후 녹음 작업이 진행이 됩니다.

이 부분은 navigator.mediaDevices.getUserMedia(constraints).then(...)을 사용합니다.

if (navigator.mediaDevices) {
    const constraints = {
        audio: true
    }
    navigator.mediaDevices.getUserMedia(constraints)
        .then(stream => {
                .................
           
        })
        .catch(err => {
            console.log('The following error occurred: ' + err)
        })
}

마이크 소리를 실시간으로 들으려는 경우 오디오 컨텍스트를 사용하며, 마이크 소리를 녹음한 경우 저장하려는 경우 new MediaRecorder(stream) 을 사용합니다.

미디어리코더에서 .start()를 하면 녹음을 시작하고, .stop()을 하면 녹음이 종료됩니다.

아래 코드는 녹음이 진행되는 동안 데이터를 배열에 저장하는 작업입니다.

mediaRecorder.ondataavailable = e => {
    chunks.push(e.data)
}

이 배열을 블롭 데이터로 변환한 후 <audio> 의 src에 적용하면 녹음 파일이 재생됩니다.

const audio = document.createElement('audio')
...

audio.controls = true
const blob = new Blob(chunks, {
    'type': 'audio/ogg codecs=opus'
})
...
const audioURL = URL.createObjectURL(blob)
audio.src = audioURL

이것을 종합한 예제 코드는 아래와 같습니다.