Web Audio API

Web Audio API는 웹에서 오디오를 제어하기 위한 강력하고 다양한 기능을 제공한다. Web Audio API를 이용하면 오디오 소스를 선택할 수 있도록 하거나, 오디오에 이펙트를 추가하거나, 오디오를 시각화하거나, 패닝과 같은 공간 이펙트를 적용시키는 등의 작업이 가능하다.

더 자세한 내용은 아래 공식 문서 참고!

https://developer.mozilla.org/ko/docs/Web/API/Web_Audio_API

Web Audio API - Web API | MDN

---

AudioContext 는 여러 개의Audio Node 들로 구성되어 있는데, 이는 크게 Inputs(입력), Effects(효과), Destination(출력)으로 나눌 수 있다.

출처: https://developer.mozilla.org/ko/docs/Web/API/Web_Audio_API

 

Web Audio API의 일반적인 작업 흐름은 다음과 같다.

1. AudioContext를 생성한다.
2. AudioContext 내에 입력 소스(Inputs)를 생성한다.(<audio> 태그, 발진기, 스트림 등)
3. 오디오 효과 적용을 위한 Effects Node를 생성한다. (잔향 효과, 바이쿼드 필터, 패너, 컴프레서 등)
4. 오디오의 최종 목적지(Destination)를 선택한다. (시스템 스피커 등)
5. Inputs을 Effects에 연결하고, Effects를 Destination으로 연결한다.

Web Audio API 사용해 보기

Create AudioContext

AudioContext 생성은 다음과 같이 할 수 있다.

var audioContext = new AudioContext();

 

Webkit/Blink 브라우저 및 Safari 지원을 위해서는 아래와 같이 생성한다.

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

Inputs

 

생성한 AudioContext에 오디오 소스를 불러올 수 있다.

• createMediaElementSource : <audio> 태그로부터 불러오기
• createBufferSource : Raw PCM 데이터로부터 음원 불러오기. (직접 오디오 파일을 불러오는 방법)
• createMediaStreamSource : 마이크 등에서 실시간으로 음원 데이터를 받아오는 방법
• createOscillator : 자바스크립트로 즉석에서 생성된 음원을 사용하는 방법

가장 간단한 방법으로는 페이지 상에 로드된 <audio> 태그로부터 음원을 불러오는 방법이다.

<audio id="audio-source" src="/assets/src/audio.mp3">

 

위와 같은 오디오 태그가 있다고 할 때, 아래와 같이 오디오 소스를 불러올 수 있다.

var audio = document.getElementById("audio-source");
var source = audioContext.createMediaElementSource(audio);

Effects

 

볼륨 조절을 할 수 있는 GainNode를 이용하여 오디오 소스에 효과를 적용해 보자.

 

우선 아래와 같이  AudioContext 내 GainNode를 생성한다.

var gainNode = audioContext.createGain();

 

GainNode는 아래 그림과 같이 오디오의 볼륨을 조절해 준다.

출처: https://developer.mozilla.org/en-US/docs/Web/API/GainNode

 

gain 프로퍼티값을 수정하여 볼륨을 변경해 보자.

gainNode.gain.value = 1.5

Connect

 

이제 만들어진 노드들을 연결해 보자.

 

순서는 source → gainNode → destination 순이다.

var gainConnected = source.connect(gainNode);
gainConnected.connect(audioContext.destination)

 

각 노드들은 connect 메소드를 가지고 있으며, 이 메소드는 자기 자신까지 연결된 객체를 반환한다. 가장 마지막으로는 AudioContect의 목적지인 destination 프로퍼티를 연결해 준다.

Visualize

 

Web Audio API에서 제공하는 Analyser 기능을 이용하여 오디오 데이터에 대한 시각화를 할 수 있다.

analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
    drawVisual = requestAnimationFrame(draw);
    analyser.getByteFrequencyData(dataArray);

    canvasCtx.fillStyle = 'rgb(0, 0, 0)';
    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

    var barWidth = (WIDTH / bufferLength) * 2.5;
    var barHeight;
    var x = 0;

    for(var i = 0; i < bufferLength; i++) {
        barHeight = dataArray[i]/2;

        canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
        canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight);

        x += barWidth + 1;
    }
};

draw();

아래와 같이 시각화 가능!