레슨 1 / 8·15분
신디사이저 기본
Tone.js 신디사이저로 소리 만들기
Tone.js는 Web Audio API를 쉽게 다룰 수 있는 라이브러리입니다. 신디사이저(Synth)는 코드로 소리를 생성하는 가상 악기입니다. Tone.Synth는 가장 기본적인 신디사이저이며, triggerAttackRelease()로 음을 연주합니다. 브라우저 보안 정책상 사용자 인터랙션(클릭) 이후에 Tone.start()를 호출해야 오디오가 활성화됩니다.
javascript
import * as Tone from 'tone';
// 오디오 컨텍스트 시작 — 반드시 사용자 클릭 이벤트 안에서 호출
document.getElementById('startBtn').addEventListener('click', async () => {
await Tone.start();
console.log('오디오 준비 완료!');
});
// ── 기본 신디사이저 ──
const synth = new Tone.Synth().toDestination();
// triggerAttackRelease(음이름, 길이, 시작시간?)
synth.triggerAttackRelease('C4', '8n'); // 도(C4), 8분음표 길이
synth.triggerAttackRelease('E4', '8n', '+0.3'); // 0.3초 뒤 미(E4)
synth.triggerAttackRelease('G4', '4n', '+0.6'); // 0.6초 뒤 솔(G4)다양한 신디사이저 종류
javascript
// PolySynth — 여러 음을 동시에 연주 (화음)
const polySynth = new Tone.PolySynth(Tone.Synth).toDestination();
polySynth.triggerAttackRelease(['C4', 'E4', 'G4'], '2n'); // C 메이저 코드
// AMSynth — 진폭 변조 신디사이저 (떨리는 소리)
const amSynth = new Tone.AMSynth().toDestination();
amSynth.triggerAttackRelease('A3', '2n');
// FMSynth — 주파수 변조 신디사이저 (금속적/종소리)
const fmSynth = new Tone.FMSynth({
modulationIndex: 12,
harmonicity: 3.01,
}).toDestination();
fmSynth.triggerAttackRelease('D4', '4n');
// MembraneSynth — 드럼/타악기 소리
const kick = new Tone.MembraneSynth().toDestination();
kick.triggerAttackRelease('C1', '8n');- •Tone.Synth — 단순 오실레이터 + 엔벨로프, 기본 멜로디에 적합
- •Tone.PolySynth — 화음 연주 가능, 내부에 여러 Synth 보유
- •Tone.AMSynth — 진폭 변조, 트레몰로 같은 떨리는 음색
- •Tone.FMSynth — 주파수 변조, 다양한 음색 합성 가능
- •toDestination() — 스피커(출력)에 연결하는 메서드
- •음이름 형식: "C4" = 4옥타브 도, "A#3" = 3옥타브 라#
💡
브라우저의 자동재생(Autoplay) 정책으로 인해, 반드시 버튼 클릭 등 사용자 인터랙션 이벤트 핸들러 안에서 await Tone.start()를 먼저 호출해야 합니다. 그렇지 않으면 소리가 나지 않습니다.