자바스크립트와 MediaStream API를 활용한 웹에서의 실시간 백색소음 생성 앱 개발하기

13 Oct 2023

javascript

백색소음은 많은 사람들이 잠을 잘 수 있도록 도와주는 소리입니다. 이번에는 자바스크립트와 MediaStream API를 활용하여 웹에서 실시간으로 백색소음을 생성하는 앱을 개발해보겠습니다.

MediaStream API란?

MediaStream API는 웹 앱에서 오디오와 비디오 스트림을 다룰 수 있도록 해주는 API입니다. 이를 활용하여 오디오 스트림을 생성하고 다룰 수 있습니다.

개발 환경 설정하기

먼저 HTML, CSS, JavaScript 파일을 작성하기 위한 디렉토리를 생성합니다. 각각 index.html, style.css, script.js라는 파일을 생성합니다.

HTML 파일 작성하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>백색소음 생성 앱</title>
</head>
<body>
  <h1>백색소음 생성 앱</h1>
  <button id="start-btn">시작하기</button>
  <button id="stop-btn">정지하기</button>

  <script src="script.js"></script>
</body>
</html>

CSS 파일 작성하기

body {
  text-align: center;
}

button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
}

JavaScript 파일 작성하기

// 백색소음 생성 앱을 위한 스크립트

const startBtn = document.getElementById('start-btn');
const stopBtn = document.getElementById('stop-btn');

let audioContext;
let whiteNoiseNode;

// 백색소음 생성 함수
function createWhiteNoise() {
  const bufferSize = 2 * audioContext.sampleRate;
  const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
  const data = buffer.getChannelData(0);
  
  for (let i = 0; i < bufferSize; i++) {
    data[i] = Math.random() * 2 - 1;
  }
  
  whiteNoiseNode = audioContext.createBufferSource();
  whiteNoiseNode.buffer = buffer;
  whiteNoiseNode.loop = true;
  whiteNoiseNode.connect(audioContext.destination);
  whiteNoiseNode.start();
}

// 앱 시작 함수
function startApp() {
  audioContext = new (window.AudioContext || window.webkitAudioContext)();
  createWhiteNoise();
}

// 앱 정지 함수
function stopApp() {
  if (whiteNoiseNode) {
    whiteNoiseNode.stop();
    whiteNoiseNode.disconnect();
    audioContext.close();
  }
}

// 이벤트 리스너 등록
startBtn.addEventListener('click', startApp);
stopBtn.addEventListener('click', stopApp);

앱 실행하기

위의 파일들을 작성한 후, 작성한 index.html 파일을 웹 브라우저로 열어 실행할 수 있습니다. 브라우저에서 “시작하기” 버튼을 클릭하면 백색소음이 재생됩니다. “정지하기” 버튼을 클릭하면 백색소음 재생이 멈춥니다.

결론

이번 포스트에서는 자바스크립트와 MediaStream API를 활용하여 웹에서 실시간 백색소음을 생성하는 앱을 개발하는 방법을 알아보았습니다. 이러한 앱을 통해 사람들은 웹을 통해 손쉽게 백색소음을 들을 수 있게 되어 잠을 자는 데 도움을 받을 수 있습니다.

또한, MediaStream API는 다양한 오디오 및 비디오 기능을 웹 앱에서 사용할 수 있도록 해주므로 다른 응용 프로그램을 개발하는 데에도 활용할 수 있습니다.

더 많은 정보는 다음 링크에서 확인할 수 있습니다:

#백색소음 #웹개발