[미디어아트] Tone.js - 브라우저를 위한 웹 오디오 프레임워크

Tone.js는 브라우저에서 대화형 음악을 만들기위한 웹 오디오 프레임워크입니다.

Tone.js의 아키텍처는 웹 기반 오디오 애플리케이션을 만드는 음악가와 오디오 프로그래머 모두에게 친숙한 것을 목표로합니다. 높은 수준에서 Tone은 이벤트 동기화 및 예약을위한 글로벌 전송과 같은 일반적인 DAW (디지털 오디오 워크 스테이션) 기능은 물론 사전 제작 된 신디사이저 및 효과를 제공합니다. 또한 Tone은 자체 신디사이저, 효과 및 복잡한 제어 신호를 생성 할 수있는 고성능 빌딩 블록을 제공합니다.

 

Tone.js 를 이용하면 웹브라우저에서 음악을 재생하는 다양한 프로그램을 만들수 있습니다.

대표적으로는 아래 '구글 크롬 뮤직랩' 의 프로그램중 하나인 '하모닉스'를 통해서 살펴보실 수 있는데요, 아래의 링크로 들어가서 현의 모양을 나타낸것 같은 아래의 그림들을 누르면 각 그림의 파장에 맞는 다양한 소리가 재생됩니다.

 

구글크롬뮤직랩의 하모닉스 프로젝트 [ 바로가기 ] => https://musiclab.chromeexperiments.com/Harmonics/

 

더 많은 예제가 보고싶다면 아래의 주소로 들어가서 탐험해보시기 바랍니다.

Tone.js의 데모페이지 [ 바로가기 ] => https://tonejs.github.io/demos

Tone.js 에서 제공하는 example의 component들을 숙지해야 합니다.

기본 컴포넌트에는 Osillators, Envelope, Noise, Player, Microphone, Mixer가 있으며 이 중에 몇가지를 아래에서 살펴보겠습니다.

 

 

Example > Basic > Osillators

오실레이터에는 부분 및 부분 배열의 수를 설정하여 변경할 수있는 4 가지 기본 유형이 있습니다.
오실레이터는 위상 회전, 다중 오실레이터 유형 (Oscillator.type 참조) 및 전송 동기화 (Oscillator.syncFrequency 참조)를 비롯한 여러 기능을 지원합니다.

출처:  GrayArea

 

Example > Basic > Envelope

시간 경과에 따른 진폭, 주파수 또는 기타 매개 변수를 엔벨로프합니다. Tone.Envelope 및이를 확장하는 클래스는 ADSR 엔벨로프 유형을 구현합니다.이 유형은 램프를 공격, 감쇄, 유지, 해제의 4 가지 단계로 분할합니다.

Envelope는 ADSR 봉투 생성기입니다. Envelope는 AudioParam 또는 Tone.Signal에 연결할 수있는 신호를 출력합니다.

출처:  GrayArea

Example > INSTRUMENTS > Synth

Synth는 AmplitudeEnvelope를 통해 라우팅되는 OmniOscillator로 구성됩니다.

출처:  GrayArea

 

Example > Basic > Player

플레이어는 시작, 반복 및 중지 기능이있는 오디오 파일 플레이어입니다.

출처:  GrayArea

 

기타 예제

출처:  GrayArea

이상으로 몇가지 컴포넌트를 살펴보았습니다.

더욱 자세하게 살펴보고 싶으면 다음의 페이지에 접속하시면 됩니다. [ 바로가기 ] => https://tonejs.github.io/examples/

 

 

마치며

이상으로 웹브라우저에서 인터랙티브한 음악요소를 구현하기 위한 자바스크립트 라이브러리인 Tone.js를 살펴보았습니다.

 

 

출처: https://tonejs.github.io/