[ Web Audio API ] Introduction

🔴  Web Audio API

자바스크립트로 오디오 소스에 변화를 줄 수 있는 시스템이다.

기본적인 음원 로딩, 재생, 정리 뿐만 아니라 패닝, 디스토션, 딜레이 등 여러 가지 음향 효과를 추가할 수 있고, 파형 막대를 그리는 등 음원 데이터의 시각화도 손쉽게 가능하다.

 

🟠  동작 과정

Web Audio API의 모든 기능은 AudioContext 객체를 생성하면서 시작된다. AudioContext 객체는 내부에 여러 개의 Audio Node들을 가질 수 있다. 여기서 Audio Node들은 각각 하나의 역할을 수행하는 모듈들이다.

예를 들어 아래와 같은 노드들이 있다고 하자.

• GainNode : 음원의 볼륨 크기를 조절
• PannerNode : 음원에 패닝 효과를 적용하고 조절
• AnalyserNode : 음원으로부터 데이터를 추출

하나의 AudioContext 안에 있는 노드들은 서로 연결되어 하나의 연결된 그래프를 형성하게 된다.

 

기본적인 Web Audio API의 흐름은 아래와 같다.

1️⃣  AudioContext 객체를 생성한다.

2️⃣  AudioContext 내부에 오디오 Source(Audio Input)를 생성한다. 오디오 소스는 <audio> 태그, Oscillator(발진기), Raw PCM 데이터, 실시간 Stream 등이 될 수 있다.

3️⃣  Gain, Panner 등 여러 가지 Effector Node들을 생성한다.

4️⃣  오디오가 출력되는 최종 목적지를 정한다. ex) 노트북 스피커

5️⃣  Source ➡️ Effector ➡️ Destination 순서대로 연결시킨다.

 

🟡  AudioContext 생성하기

 

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

 

🟢  오디오 Source 불러오기

🏷️  createMediaElementSource : <audio /> 태그로부터 mp3, wav 등의 오디오 파일 불러오기

🏷️  createBufferSource : Raw PCM 데이터로부터 음원 불러오기.

🏷️  createMediaStreamSource : 설치된 마이크 등으로부터 실시간 음원 데이터를 받아오는 방법이다.

🏷️  createOscillator : 주파수, 볼륨, 파형을 계산해 만들어내는 소리를 불러온다.

 

🔵  스트림과 버퍼란?

스트림이란, 마이크와 같은 입력 장치나 서버로부터 들어오는 일련의 데이터 흐름을 읽어 들이면서, 스피커와 같은 출력 장치나 동영상 플레이어로 데이터의 흐름을 내보내는 역할을 하는 객체이다.

스트림이 있기 전까지는 데이터 전체가 다운로드 되어야만 처리가 가능했으나, 스트림이 가능해지면서 동영상 스트리밍, 오디오 스트리밍 등의 서비스가 가능해진 것이다.

 

버퍼란, 스트림 데이터를 조금씩 읽고, 저장하고, 처리하고, 비우기를 반복하는 메모리 공간이다. 일반적으로 RAM 메모리의 일부 공간이 버퍼를 위해 사용된다.

자바스크립트의 버퍼란, 특정 크기의 메모리 공간에 바이너리 데이터를 저장해두는 객체이다.

자바스크립트 엔진은 메모리 공간을 알아서 확보하고 해제하는 등의 관리를 수행하기 때문에 개발자는 데이터가 저장될 메모리의 크기에 관여할 수 없었다.

하지만, 자바스크립트의 용도가 다양해지면서 오디오, 비디오 및 웹소켓 통신에서 사용하는 Raw Binary Data를 직접 다룰 필요가 생겼기 때문에 메모리 공간을 직접 설정할 수 있는 버퍼가 생기게 되었다고 한다.

⚪  ArrayBuffer

개발자가 지정한 메모리 크기만큼의 바이너리 데이터를 저장하는 객체이다.

단, ArrayBuffer는 메모리를 확보해 바이너리 데이터를 0으로 저장해두는 역할만 하며, 실제 데이터 접근은 별도로 제공되는 ArrayBufferView를 통해서만 가능하다.

• ArrayBufferView란 TypedArray, DataView를 통칭하는 말이며, 객체가 아니다.
• 마찬가지로, TypedArray도 Uint8Array, Float32Array 등을 통칭하는 말이며, 객체가 아니다.

 

자바스크립트 버퍼(Buffer): ArrayBuffer, TypedArray 파헤치기!

 

 

🟣

 

 

🟤