[JS][라이브러리 소개] ToneJS를 사용해서 화이트 노이즈 만드는 방법

# ToneJS를 사용해서 직접 노이즈를 만들어 보자

- 안녕하세요. Jake입니다. 오늘 포스팅에서는 ToneJS라는 라이브러리를 사용해서 화이트 노이즈를 만드는 간단한 방법을 소개하려고 합니다. 저는 이 방법으로 만든 노이즈를 제가 서비스 중인 Pomocat이라는 집중 타이머(뽀모도로) 앱에서 사용자한테 들려주고 있습니다.  

# 관련 링크

- 예제 페이지

https://tonejs.github.io/examples/

Tone.js Examples

- 데모 페이지

https://tonejs.github.io/demos

 

# 사용 방법

- ToneJS를 설치합니다

yarn add tone

 

- Tone을 Import하고 원하는 노이즈 종류(pink, white, brown)를 고르신 후에 노이즈를 생성합니다. 그리고 노이즈의 필터를 정의해 주고, start를 눌러서 재생하실 수 있습니다. 아래의 코드에서 start가 여러 번 호출되어 조금 헷갈릴 수 있는데, 아무래도 라이브러리가 오디오 믹싱에 관련된 대부분의 기능들을 제공하다보니, 여러 소리를 더하고 빼는 등의 믹싱에 필요한 작업들을 제공하기 위한 구조라고 보시면 될 것 같습니다.

 

import * as Tone from 'tone'

const noise = new Tone.Noise("pink").start();
// make an autofilter to shape the noise
const autoFilter = new Tone.AutoFilter({
	frequency: "8n",
	baseFrequency: 200,
	octaves: 8
}).toDestination().start();
// connect the noise
noise.connect(autoFilter);
// start the autofilter LFO
autoFilter.start();

 

- 노이즈의 필터에 대해서 팁을 조금 드리자면, 적용하는 방법 자체는 어렵지 않지만, 오디오 믹싱 쪽 지식이 있으신 분들이 아니라면 필터를 정의하는데 필요한 파라미터들이 생소한 개념일 수 있습니다. 이럴 경우 노이즈 생성 사이트와 GPT를 활용하시기를 추천 드립니다. 노이즈 생성 사이트에서 어느정도 원하는 형태의 소음을 찾고, 소음의 느낌이나 설명을 GPT에 ToneJS의 노이즈로 만들어 달라고 하면, 파라미터가 포함된 코드를 알려주기 때문에, 이를 몇 번 반복하면 원하는 소리를 얻으실 수 있을 것입니다.

 

# 마치며

- 본 포스팅에서는 ToneJS로 노이즈를 생성하는 방법을 소개하였지만, 실제 ToneJS가 제공하는 기능은 훨씬 더 다양합니다. 어떤 것들을 제공하는지는 위의 예제, 데모 사이트를 방문해 보시길 추천 드립니다. 특히 음원 플레이어나, 시각효과 같은 기능들은 꼭 오디오 관련 개발이 아니어도 활용 가능한 기능들이니 알아 두셨다가 적절히 활용하시면 좋을 것 같습니다.

---