Visualizer 구현-2

어제 찾았던 공통점들을 뜯어볼 차례다.
구글링 해보니 WEB-AUDIO-API라는 큰 틀안에 AudioContext가 존재했다.
mdn을 위주로 개념을 파악했다.

WEB-AUDIO-API

기본적으로 HTML5에서는 audio태그를 지원한다.
하지만, audio태그만으로는 복잡한 오디오 작업을 처리할만큼 강력하지는 않다.
Web Audio API 는 웹에서 오디오에 이펙트를 추가하거나,오디오를 시각화하거나,
패닝과 같은 공간 이펙트를 적용시키는 등의 작업 하는등
다양한 기능을 구현할 수 있도록 도와준다.
WEB-AUDIO-API는 모든 작업을 AudioContext내에서 처리한다.
AudioContext 내에서는 각각의 AudioNode 들로 소리를 제어하게 되는데,
크게 Inputs(입력), Effects(수정), Destination(출력)로 나눌 수 있다.

AudioContext

new AudioContext() 생성자를 이용해 새로운 AudioContext 객체를 생성한다.
AudioContext 객체는 부모 인터페이스인 BaseAudioContext로부터 속성을 상속받으며,
BaseAudioContext로부터 메서드를 상속받는다.

AudioContext는 state를 가지고 있는데,
suspended는 중지 running은 실행 중 closed은 닫힘을 의미한다.

resume() 실행 와 suspend() 중지 으로 Context 상태를 변경할 수 있다.
출력 위치를 나타내는 Destination 를 가지고 있는데 이는 기본값으로 스피커로 설정되어있다.

canvas

canvas는 HTML에서 태그로서 JS를 사용하여 그림을 그리는 데에 사용 가능하다.
canvas 태그는 width와 height 속성만 가지고 있다.

<canvas id="canvas" width="800" height="500" />

width height 속성을 지정하지 않으면 width는 300px height는 150px이다.
CSS를 통해 크기를 지정할 수 있지만 초기 canvas 비율을 고려하지 않으면 왜곡현상이 나타난다.

보통 canvas를 DOM을 이용해서 JS함수 내부에서 canvas 속성 메서드를 이용해
canvas무언가를 그려내는 과정으로 사용하게 된다.

오늘은 여기까지..

일단은 WEB-AUDIO-API와 canvas의 대략적인 개념을 알아봤다.
개념을 알아보니 어떤 방식으로 Visualizer를 구현하는지 알게되었다.
WEB-AUDIO-API는 오디오 시각화를 위해 주파수값을 가져오는 메서드가 존재하고,
그 주파수값으로 canvas에 그려내는 작업으로 구현하는듯 하다.
하지만 어디서부터 건드려야 할지는 막막하긴 하다.
내일 AudioContext와 canvas 두가지 키워드로 레퍼런스를 찾아볼생각이다.