웹 애플리케이션에서 실시간 오디오 녹음 및 재생 기능을 구현하기 위해 MediaStream API를 사용할 수 있습니다. 이 API는 웹 브라우저에서 오디오 스트림을 캡처하고 처리할 수 있는 강력한 기능을 제공합니다.
MediaStream API란?
MediaStream API는 웹 브라우저에서 오디오 및 비디오 스트림을 캡처하고 사용자에게 제공하는 API입니다. 이 API를 사용하면 웹 애플리케이션에서 오디오 및 비디오 녹화, 영상 통화, 음성 인식 등과 같은 다양한 기능을 구현할 수 있습니다.
녹음 기능 구현하기
먼저, 웹 애플리케이션에서 오디오 녹음을 시작하려면 getUserMedia 메소드를 사용하여 오디오 스트림을 가져와야 합니다. 이 메소드는 사용자의 마이크에 액세스하고 미디어 스트림을 반환합니다.
navigator.mediaDevices.getUserMedia({audio: true})
.then(stream => {
// 미디어 스트림을 성공적으로 가져온 경우
const mediaRecorder = new MediaRecorder(stream);
// 녹음 시작
mediaRecorder.start();
// 녹음 중 ...
mediaRecorder.ondataavailable = e => {
// 녹음 데이터를 처리하는 로직을 구현합니다.
};
// 녹음 종료
mediaRecorder.onstop = e => {
// 녹음이 종료된 후 처리할 로직을 구현합니다.
};
})
.catch(error => {
// 미디어 스트림을 가져오지 못한 경우
console.error("오디오 스트림을 가져오는 중 오류가 발생했습니다:", error);
});
위의 코드에서 getUserMedia 메소드를 호출할 때 audio: true를 전달하여 오디오 스트림을 가져옵니다. 스트림을 가져온 후에는 MediaRecorder 객체를 생성하여 녹음을 시작하고, 녹음 데이터를 처리하기 위해 ondataavailable 이벤트를 설정합니다. 마지막으로, onstop 이벤트를 사용하여 녹음이 종료된 후 처리할 로직을 구현할 수 있습니다.
재생 기능 구현하기
오디오 녹음을 통해 얻은 데이터를 재생하기 위해서는 AudioContext를 사용해야 합니다. 녹음된 오디오 데이터를 AudioContext에 추가하고, AudioBufferSourceNode를 사용하여 재생하는 방식으로 구현할 수 있습니다.
const audioContext = new AudioContext();
function playRecordedAudio(recordedData) {
audioContext.decodeAudioData(recordedData, buffer => {
const source = audioContext.createBufferSource();
source.buffer = buffer;
source.connect(audioContext.destination);
source.start();
});
}
위의 코드에서 playRecordedAudio 함수는 녹음된 오디오 데이터를 인자로 받아 AudioBufferSourceNode를 생성하고 재생합니다. AudioContext의 decodeAudioData 메소드를 사용하여 녹음 데이터를 해석한 후, buffer에 저장합니다. 그리고 AudioBufferSourceNode에 buffer를 설정하고 재생을 시작합니다.
요약
MediaStream API를 사용하면 웹 애플리케이션에서 실시간 오디오 녹음 및 재생 기능을 구현할 수 있습니다. getUserMedia를 사용하여 오디오 스트림을 가져와서 녹음을 시작하고, MediaRecorder를 통해 데이터를 처리하며, AudioContext를 사용하여 녹음된 오디오 데이터를 재생할 수 있습니다.
더 자세한 내용은 아래의 참고 자료를 참고하시기 바랍니다.