Tone.js Synth Pad — Free Web Audio Note Grid Snippet

<div class="tp-wrap">
  <div class="tp-head">
    <h1>Synth Pad</h1>
    <p id="tpStatus">Tap a pad to start audio and play a note.</p>
  </div>
  <div class="tp-grid" id="tpGrid">
    <button class="tp-pad" data-note="C4">C4</button>
    <button class="tp-pad" data-note="D4">D4</button>
    <button class="tp-pad" data-note="E4">E4</button>
    <button class="tp-pad" data-note="F4">F4</button>
    <button class="tp-pad" data-note="G4">G4</button>
    <button class="tp-pad" data-note="A4">A4</button>
    <button class="tp-pad" data-note="B4">B4</button>
    <button class="tp-pad" data-note="C5">C5</button>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0a0b12;color:#fff;min-height:100vh;display:flex;align-items:center}
.tp-wrap{width:100%;max-width:560px;margin:0 auto;padding:clamp(24px,6vw,48px);display:flex;flex-direction:column;gap:24px}
.tp-head{text-align:center}
.tp-head h1{font-size:clamp(26px,5vw,38px);letter-spacing:-.02em;background:linear-gradient(135deg,#34d399,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.tp-head p{color:#8b90ab;margin-top:8px;font-size:14px}
.tp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tp-pad{aspect-ratio:1;border-radius:16px;border:1px solid #232a3d;background:linear-gradient(160deg,#151a2c,#0e1120);color:#c9cee0;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:transform .08s,box-shadow .15s,background .15s;position:relative;overflow:hidden}
.tp-pad:active{transform:scale(.94)}
.tp-pad.is-active{background:linear-gradient(160deg,#134e4a,#0e1120);box-shadow:0 0 0 2px #34d399,0 0 30px rgba(52,211,153,.5);color:#fff}

// Browsers block audio until a user gesture. Tone.start() resolves the
// shared AudioContext, and it must be called from inside a real click/tap
// handler — we do it lazily on the first pad press, not on load.
let started = false;
const synth = new Tone.PolySynth(Tone.Synth, {
  oscillator: { type: 'triangle' },
  envelope: { attack: 0.01, decay: 0.2, sustain: 0.2, release: 0.6 },
}).toDestination();

const status = document.getElementById('tpStatus');
const pads = document.querySelectorAll('.tp-pad');

pads.forEach((pad) => {
  pad.addEventListener('pointerdown', async () => {
    if (!started) {
      await Tone.start();
      started = true;
      status.textContent = 'Audio running — tap any pad.';
    }
    const note = pad.dataset.note;
    synth.triggerAttackRelease(note, '8n');
    flash(pad);
  });
});

function flash(pad) {
  pad.classList.add('is-active');
  setTimeout(() => pad.classList.remove('is-active'), 220);
}