Playground
Tone.js
웹 오디오 & 음악 프로그래밍
audio.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// Tone.js Audio Programming // Click anywhere to start audio (browser requires user gesture) document.body.innerHTML = ` <div style="font-family: system-ui; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background: #1a1a2e; color: #e2e8f0; gap: 20px;"> <h2>Tone.js Synthesizer</h2> <p style="color: #94a3b8; font-size: 14px;">Click the buttons to play notes</p> <div id="piano" style="display: flex; gap: 4px;"></div> <button id="melody" style="margin-top: 16px; padding: 12px 24px; background: #6366f1; color: white; border: none; border-radius: 8px; font-size: 14px; cursor: pointer;"> Play Melody </button> <div id="status" style="color: #64748b; font-size: 12px;">Click to start</div> </div> `; const notes = ['C4','D4','E4','F4','G4','A4','B4','C5']; const colors = ['#ef4444','#f97316','#eab308','#22c55e','#06b6d4','#3b82f6','#8b5cf6','#ec4899']; const piano = document.getElementById('piano'); notes.forEach((note, i) => { const btn = document.createElement('button'); btn.textContent = note; btn.style.cssText = `padding: 20px 16px; background: ${colors[i]}; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; min-width: 50px;`; btn.onclick = async () => { await Tone.start(); const synth = new Tone.Synth().toDestination(); synth.triggerAttackRelease(note, '8n'); document.getElementById('status').textContent = 'Playing: ' + note; }; piano.appendChild(btn); }); document.getElementById('melody').onclick = async () => { await Tone.start(); const synth = new Tone.Synth().toDestination(); const melody = ['C4','E4','G4','C5','G4','E4','C4']; const now = Tone.now(); melody.forEach((note, i) => { synth.triggerAttackRelease(note, '8n', now + i * 0.3); }); document.getElementById('status').textContent = 'Playing melody...'; };
Preview
Console
Tone.js
audio.js
UTF-8
Ln 1, Col 1
Spaces: 2