ChiptuneSynth — 시작하기

ChiptuneSynth를 단계별로 배우세요 — "실행"을 클릭하여 각 예제를 라이브로 들어보세요

안녕, 칩튠!

신디사이저를 만들고 초기화한 다음 첫 번째 음향 효과를 재생하세요 — 모두 3줄로.

const synth = new ChiptuneSynth();
await synth.init();
synth.playPreset('coin');  // ding!

AudioContext는 시작하려면 사용자 동작(클릭)이 필요합니다 — 그래서 버튼을 사용합니다.

이름으로 음표 재생

리드 트랙(트랙 0)에서 가운데 C를 0.5초 동안 재생합니다.

synth.playNoteByName('C', 4, 0, 0.5);
// note, octave, track, duration (seconds)

멜로디 재생

타이밍으로 여러 음표를 예약하여 간단한 곡을 만드세요.

const melody = [
  { note:'C', oct:4, time:0 },
  { note:'E', oct:4, time:0.25 },
  { note:'G', oct:4, time:0.5 },
  { note:'C', oct:5, time:0.75 }
];
melody.forEach(n =>
  setTimeout(() =>
    synth.playNoteByName(n.note, n.oct, 0, 0.3),
    n.time * 1000
  )
);

악기 불러오기

기본 구형파에서 바이올린으로 전환하고 음표를 재생합니다.

synth.loadInstrument('violin', 0);
synth.playNoteByName('A', 4, 0, 1.5);
// Available: piano, violin, cello, flute, organ,
// brass, harmonica, synthLead, synthPad, synthBass,
// marimba, electricGuitar

멀티 트랙 레이어링

동시에 다른 트랙에서 다른 악기를 연주하세요.

synth.loadInstrument('synthPad', 0);  // Lead
synth.loadInstrument('synthBass', 1); // Bass

// Play a chord on the pad
synth.playNoteByName('C', 4, 0, 2);
synth.playNoteByName('E', 4, 0, 2);
synth.playNoteByName('G', 4, 0, 2);

// Bass note underneath
synth.playNoteByName('C', 2, 1, 2);

사운드 조정

엔벨로프, 비브라토, 파형을 사용자 지정하여 사운드를 형성하세요.

// Slow attack pad
synth.updateEnvelope(0, {
  attack: 0.5, decay: 0.3,
  sustain: 0.6, release: 1.0
});

// Add vibrato
synth.updateVibrato(0, {
  rate: 5, depth: 8
});

// Change waveform to sawtooth
synth.updateTrack(0, { type: 'sawtooth' });

synth.playNoteByName('D', 4, 0, 2.5);

게임 SFX 콤보

게임 시퀀스를 위해 여러 음향 효과를 연결하세요 — 코인 수집, 파워업, 발사!

synth.playPreset('coin');
setTimeout(() => synth.playPreset('powerup'), 400);
setTimeout(() => synth.playPreset('laser'), 1200);
setTimeout(() => synth.playPreset('explosion'), 1500);
setTimeout(() => synth.playPreset('1up'), 2200);

파형 시각화

캔버스에 라이브 오디오 파형을 그리세요 — 게임 UI에 탁월합니다!

function draw() {
  const data = synth.getWaveformData();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle = '#00f0ff';
  ctx.beginPath();
  data.forEach((v, i) => {
    const x = (i / data.length) * canvas.width;
    const y = (v / 255) * canvas.height;
    i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
  });
  ctx.stroke();
  requestAnimationFrame(draw);
}
draw();