소개
웹 브라우저에서 실시간으로 오디오를 처리하고 변조하는 기능은 다양한 애플리케이션과 웹사이트에 유용하게 사용될 수 있습니다. 이를 위해 자바스크립트와 MediaStream API를 활용하여 웹에서 실시간 소리 변조 기능을 개발해보겠습니다. MediaStream API는 웹 브라우저에서 오디오와 비디오를 캡처, 처리, 재생할 수 있는 API로, 웹에서 멀티미디어 기능을 제어할 수 있도록 도와줍니다.
설정
가장 먼저, 웹 브라우저에서 사용자의 마이크에 접근할 수 있도록 설정해야 합니다. 이를 위해 getUserMedia 함수를 사용합니다. 다음은 이 함수를 사용하여 마이크로부터 오디오 스트림을 가져오는 코드입니다.
navigator.mediaDevices.getUserMedia({ audio: true })
.then(function(stream) {
// 오디오 스트림을 가져온 후 처리 작업을 수행합니다.
})
.catch(function(error) {
console.error('마이크 접근 권한이 없습니다:', error);
});
오디오 처리
오디오 스트림을 가져온 후에는 실시간으로 오디오 데이터를 처리할 수 있습니다. 이 예제에서는 오디오 데이터에 변조 효과를 적용하여 출력하는 간단한 변조기를 개발해보겠습니다.
// 오디오 컨텍스트 생성
const audioContext = new AudioContext();
// 오디오 입력 스트림을 오디오 컨텍스트로 연결
const source = audioContext.createMediaStreamSource(stream);
// 오디오 출력 노드 생성
const destination = audioContext.destination;
// 변조 효과 적용을 위한 오디오 처리기 생성
const processor = audioContext.createScriptProcessor(1024, 1, 1);
// 오디오 처리기에 변조 효과를 적용하는 함수 정의
processor.onaudioprocess = function(event) {
const input = event.inputBuffer.getChannelData(0);
const output = event.outputBuffer.getChannelData(0);
// 오디오 데이터 변조 작업 수행
for (let i = 0; i < input.length; i++) {
output[i] = input[i] * 0.5; // 변조 효과 예시: 소리 크기를 반으로 줄임
}
};
// 오디오 입력 스트림을 오디오 처리기로 연결
source.connect(processor);
// 오디오 처리기를 오디오 출력으로 연결
processor.connect(destination);
위의 코드는 오디오 컨텍스트를 생성하고, 오디오 입력 스트림과 출력 스트림을 생성하여 변조 효과를 적용합니다. 오디오 처리기의 onaudioprocess 이벤트 핸들러 함수 내에서 원하는 변조 작업을 수행할 수 있습니다. 위의 예제에서는 입력 오디오 데이터의 크기를 반으로 줄이는 변조 효과를 적용하였습니다. 이렇게 변조된 오디오 데이터는 오디오 출력으로 전달됩니다.
결과 확인
변조 효과를 적용한 오디오를 실시간으로 확인하려면 웹 브라우저에 오디오 요소를 추가해야 합니다. 다음은 HTML에 오디오 요소를 추가하는 예제입니다.
<audio id="audio" controls></audio>
위의 코드를 추가한 후에는 JavaScript 코드에서 오디오 요소와 오디오 출력을 연결해야 합니다.
const audioElement = document.getElementById('audio');
const audioStream = new MediaStream([destination.stream.getAudioTracks()[0]]);
audioElement.srcObject = audioStream;
이렇게 오디오 요소와 오디오 출력을 연결하면 변조된 오디오를 실시간으로 확인할 수 있습니다.
마무리
이와 같이 자바스크립트와 MediaStream API를 사용하여 웹에서 실시간 소리 변조 기능을 개발할 수 있습니다. 이를 응용하여 더 다양한 오디오 처리 작업을 수행하거나 실제 애플리케이션에 적용할 수 있습니다. 추가적으로 오디오 데이터의 시각화나 더 복잡한 오디오 처리 기능을 구현할 수도 있습니다. 자바스크립트와 MediaStream API의 다양한 기능을 활용하여 웹에서 멀티미디어 기능을 개발해보세요!