[JavaScript] Web Audio API 이해하기 위해 쓰는 글

언젠가 미래에 Audio API로 재밌는 프로젝트를 한 번 만들어 보고 싶다는 생각이 들었다.

하지만 오디오 관련 지식이나 개념이 부족했고... mdn 문서를 쭉 살펴보니 모르는 용어가 많이 나와서 혼란스러웠다.

mdn 문서 기준으로 하여 내가 최대한 이해하기 쉽게 정리해보려고 쓰는 글이다.

 

Web Audio API를 사용한 대략적인 작업 흐름의 과정

오디오 컨텍스트 생성

오디오 관련 작업을 하기 위해서는 먼저 오디오 컨텍스트(AudioContext)를 생성해야 한다.

const audioCtx = new AudioContext()

오디오 컨텍스트에서 모든 작업이 일어나기 때문이다. 그럼 오디오 컨텍스트를 가지고 어떻게 작업을 해야할까?

 

오디오 소스 생성

오디오를 가지고 작업을 하려면 당연히 작업할 오디오 소스가 필요하다.

소스는 우리가 직접 생성하거나 오디오 파일(e.g. mp3)를 받아오거나 아니면 마이크와 같은 입력장치를 통해 받아올 수 있다.

 

파일을 가지고 작업할 경우

// 1. HTML 요소로 가져오는 방법
const myAudio = document.querySelector("audio")
const audioSource = audioCtx.createMediaElementSource(myAudio)

// 2.파일을 가져와서 버퍼로 디코드하는 방법
fetch('audio.mp3')
  .then(response => response.arrayBuffer())
  .then(buffer => audioContext.decodeAudioData(buffer))
  .then(decodedData => {
    const audioSource = audioContext.createBufferSource();
    audioSource.buffer = decodedData;
})

마이크나 다른 오디오 입력 장치로부터 실시간 오디오를 받아오는 경우

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const audioSource = audioContext.createMediaStreamSource(stream);
  })

직접 사운드를 생성하는 경우

// 1. 오실레이터를 사용한 방법
const oscillator = audioCtx.createOscillator()

// 2. 직접 오디오 버퍼를 만들어 생성한 방법
const bufferSize = audioCtx.sampleRate * noiseLength;
const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate)
let audioSource = audioCtx.createBufferSource()
audioSource.buffer = buffer

 

오디오 출력 정의

우리가 소리를 듣게 위해 오디오 출력의 목적지를 연결하는 작업이 필요하다.

처음에 생성한 오디오의 컨텍스트의 destination 속성과 오디오 소스의 connect 메서드를 통해 둘을 연결해주면 된다.

audioSource.connect(audioContext.destination)

 

 

(작성중)