이제는 웹 브라우저에서 음악을 재생하고 녹음할 수 있는 웹 애플리케이션을 개발할 때가 왔습니다. MediaStream API는 이러한 작업을 가능하게 해주는 강력한 도구입니다. 이 기능을 활용하여 음악 재생 및 녹음 앱을 만들어보겠습니다.
1. 사전 요구사항
- 최신 버전의 웹 브라우저(Chrome, Firefox, Safari 등)
- HTML, CSS, JavaScript 기초 지식
- 웹 서버 환경(로컬 또는 호스팅)
2. 음악 재생 기능 구현하기
음악 재생을 위해 먼저 <audio> 요소를 생성하고, src 속성을 사용하여 재생할 음악 파일을 로드합니다. 그런 다음 다양한 컨트롤을 추가하여 사용자가 음악을 조작할 수 있도록 합니다.
<audio controls>
<source src="audio.wav" type="audio/wav">
Your browser does not support the audio tag.
</audio>
위의 코드에서 src 속성에는 재생할 음악 파일의 경로를 지정하고, type 속성에는 해당 파일의 MIME 타입을 지정합니다. controls 속성은 음악 재생을 컨트롤할 수 있는 UI를 자동으로 생성합니다.
3. 녹음 기능 구현하기
녹음 기능을 추가하려면 MediaStream API의 getUserMedia 메서드를 사용하여 사용자의 마이크에 액세스해야 합니다. 먼저 <button>을 만들어서 녹음을 시작하고 정지하는 기능을 구현합니다.
<button id="recordButton">Record</button>
<button id="stopButton">Stop</button>
다음으로, JavaScript 코드에서 getUserMedia를 호출하고 마이크에서 오디오를 수집하는 미디어 스트림을 가져옵니다.
let mediaRecorder;
let chunks = [];
const recordButton = document.getElementById('recordButton');
const stopButton = document.getElementById('stopButton');
recordButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);
function startRecording() {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.addEventListener('dataavailable', event => {
chunks.push(event.data);
});
mediaRecorder.start();
});
}
function stopRecording() {
mediaRecorder.stop();
const audioBlob = new Blob(chunks, { type: 'audio/webm' });
const audioURL = URL.createObjectURL(audioBlob);
const audio = new Audio();
audio.src = audioURL;
audio.controls = true;
document.body.appendChild(audio);
chunks = [];
}
위의 코드에서 startRecording 함수는 getUserMedia를 호출하여 마이크 액세스 권한을 얻고, 오디오 스트림을 생성합니다. 그 후 MediaRecorder 객체를 생성하고 dataavailable 이벤트를 사용하여 오디오 데이터를 수집합니다.
stopRecording 함수는 녹음을 정지하고 오디오 데이터를 Blob로 변환한 다음, <audio> 요소를 동적으로 생성하여 재생 가능한 오디오를 표시합니다.
4. 웹 애플리케이션 완성
위의 코드를 HTML 파일에 추가하고 웹 서버에서 실행하면 음악 재생 및 녹음 기능이 있는 웹 애플리케이션이 완성됩니다. 사용자는 음악 파일을 재생하거나 마이크를 통해 녹음할 수 있습니다.
아직 구현되지 않은 기능을 추가하고 디자인을 개선하여 사용자 경험을 향상시킬 수 있습니다. MediaStream API의 다양한 기능을 사용하여 앱을 더욱 확장시킬 수도 있습니다.