Web Audio API..란 게 있었네..

Written by Keith
on 

이게 언제 표준이 되었는지 모르지만 요새 여기 저기를 떠돌다보면 아주 당연한 것인 양 이야기되고 있다.

대략 2010년 경에 소개되었지 싶은데, 본격적으로 쓰이진 않은 듯 하다.

대개 html 상에 어떤 음악 샘플을 올려두고 쉽게 플레이할 수 있게 하는 정도?로 쓰여졌지 싶다.

홈페이지에서 보여지는 인터페이스만 봐도 나름 많은 기능들이 제공되는 것을 알 수 있다. 사실 이 함수들만 봐도 힘들게 필터를 만들어넣고 signal generation을 js로 짜넣거나 해야할 필요는 없을 듯 하다. waveform도 다양하게 제공하는 것으로 보여진다.

어차피 JavaScript로 불러내어지는 것이지만 실제로는 C++ 계열로 작성되었을테니까 일단 API에 있는 객체나 함수를 불러서 작업하면 무리없이 동작시킬 수 있다. 다만 js로 신호를 샘플단위로 직접 처리하려고 하면 문제가 되겠지만. 어쨌든 js로 일을 한다고 치면 browser가 지원하는 모든 기능을 함께 사용할 수 있으니까 마치 DAW에서 불러서 쓰는 것 처럼 할 수는 없다고 하더라도 대략 흉내 정도는 낼 수가 있다.

다음은 프로의 손길이 닿은 데모이다. 사실 이 정도면 힘들 게 유튜브 비디오 클립을 만들고 문서를 작성할 이유가 없을 듯 하다.

surreal machine

실행해보면 알겠지만 정해진 오디오 소스를 가지고 그 음색을 변형하는 작업을 거의 실시간으로 할 수 있다. 소스를 들여다보면 신호처리의 핵심부는 어떤 binary를 가져다 붙여놓는 것 (아마도 C++ function일 것으로 보이는데) 도 가능하고 그것을 javascript를 통해서 interfacing하고 있는 모양새를 취하고 있다. 그러니까 그 임포트된 바이너리(아마도 x86 바이너리일 듯 한데 M1에서도 동작한다 신기하게..)는 블락 단위로 신호를 처리하도록 되어있는 그런 것이다. 생각보다 처리가 매끄럽지가 않아서인지 popping noise가 발생하고 (내가 동작시키는 환경에선) CPU load를 제법 많이 잡아먹고 있는데, 아마도 이것은 핵심 신호처리 블락이 아닌 javascript - binary간 interfacing 때문이라고 본다. Javascript로 이렇게 많은 데이터를 실시간으로 이동시키는 것도 사실 보기 힘든 예가 아닐까 싶은데.

요약하면..