자바스크립트와 MediaStream API를 활용한 실시간 음성 필터링 기능 개발하기

13 Oct 2023

javascript

Introduction

음성 필터링은 음성 데이터에 특정 효과를 적용하여 원하는 소리를 만들어내는 기술입니다. 이번 포스트에서는 자바스크립트와 MediaStream API를 사용하여 웹 브라우저 상에서 실시간 음성 필터링 기능을 개발하는 방법을 알아보겠습니다.

Prerequisites

이번 예제를 따라하기 위해서는 다음의 사항이 필요합니다:

최신 버전의 웹 브라우저 (Chrome, Firefox, Safari 등)
기본적인 자바스크립트 프로그래밍 지식

Getting Started

HTML 파일을 생성하고, 아래의 코드를 추가합니다:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Voice Filtering</title>
</head>
<body>
  <button id="startButton">Start Recording</button>
  <button id="stopButton">Stop Recording</button>
  <audio id="recordedAudio"></audio>
  <script src="script.js"></script>
</body>
</html>

자바스크립트 파일을 생성하고, 아래의 코드를 추가합니다:

window.addEventListener('DOMContentLoaded', () => {
  const startButton = document.getElementById('startButton');
  const stopButton = document.getElementById('stopButton');
  
  const constraints = { audio: true };
  let mediaRecorder;
  let chunks = [];
  
  startButton.addEventListener('click', async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia(constraints);
      mediaRecorder = new MediaRecorder(stream);
      
      mediaRecorder.addEventListener('dataavailable', (event) => {
        chunks.push(event.data);
      });
      
      mediaRecorder.addEventListener('stop', () => {
        const blob = new Blob(chunks, { type: 'audio/webm' });
        const audioElement = document.getElementById('recordedAudio');
        audioElement.src = URL.createObjectURL(blob);
        chunks = [];
      });
      
      mediaRecorder.start();
    } catch (error) {
      console.error(error);
    }
  });
  
  stopButton.addEventListener('click', () => {
    mediaRecorder.stop();
  });
});

코드 설명

위의 자바스크립트 코드에서는 startButton과 stopButton 버튼을 가져와 각각의 클릭 이벤트에 대한 리스너를 등록합니다.

startButton을 클릭하면 navigator.mediaDevices.getUserMedia() 함수를 사용하여 사용자의 오디오 스트림을 얻어옵니다. 그리고 MediaRecorder 객체를 생성하여 데이터를 수집하고, dataavailable 이벤트에서 수집된 데이터를 배열에 저장합니다.

stopButton을 클릭하면 녹음을 중지하고, 배열에 저장된 데이터를 WebM 형식으로 Blob 객체로 저장합니다. 마지막으로 recordedAudio 오디오 요소의 소스로 설정하여 녹음된 음성을 재생합니다.

실행 및 테스트

위의 코드를 저장한 후 웹 브라우저에서 HTML 파일을 열고 Start Recording 버튼을 클릭합니다. 마이크에 대고 말하면 음성이 녹음되며, Stop Recording 버튼을 클릭하면 녹음이 종료됩니다. 녹음된 음성은 recordedAudio 오디오 요소에서 재생됩니다.

결론

이번 포스트에서는 자바스크립트와 MediaStream API를 사용하여 웹 브라우저에서 실시간 음성 필터링 기능을 개발하는 방법을 알아보았습니다. 이를 통해 다양한 응용 프로그램에서 실시간 음성 처리를 구현할 수 있습니다. 추가로 음성 필터링을 위한 다양한 효과를 적용해볼 수도 있습니다.

Introduction

Prerequisites

Getting Started

코드 설명

실행 및 테스트

결론

References