Simple Tone Synth Pad — Free HTML CSS JS Snippet

<div class="sp-card">
  <div class="sp-head">
    <span class="sp-eyebrow">Synth</span>
    <h2>Tone Pad</h2>
  </div>
  <div class="sp-grid" id="spGrid"></div>
</div>

*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.sp-card{font-family:system-ui,-apple-system,sans-serif;background:#fff;color:#1e293b;border:1px solid #e2e8f0;border-radius:18px;padding:22px;max-width:440px;width:100%;margin:0 auto;box-shadow:0 12px 30px rgba(30,41,59,0.06)}
.sp-head{margin-bottom:16px}
.sp-eyebrow{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;margin-bottom:4px}
.sp-head h2{font-size:19px;margin:0}
.sp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sp-pad{aspect-ratio:1;border:none;border-radius:14px;cursor:pointer;font-size:12px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .08s;user-select:none;font-family:inherit}
.sp-pad:active,.sp-pad.sp-pressed{transform:scale(.9)}
.sp-pad.sp-pressed{filter:brightness(1.3)}

var NOTES = [
  { name: 'C4', freq: 261.63, color: '#6366f1' },
  { name: 'D4', freq: 293.66, color: '#8b5cf6' },
  { name: 'E4', freq: 329.63, color: '#a855f7' },
  { name: 'G4', freq: 392.0, color: '#ec4899' },
  { name: 'A4', freq: 440.0, color: '#f43f5e' },
  { name: 'C5', freq: 523.25, color: '#f97316' },
  { name: 'D5', freq: 587.33, color: '#eab308' },
  { name: 'E5', freq: 659.25, color: '#22c55e' },
  { name: 'G5', freq: 783.99, color: '#14b8a6' },
  { name: 'A5', freq: 880.0, color: '#0ea5e9' },
];

var grid = document.getElementById('spGrid');
var audioCtx = null;

function getCtx() {
  if (!audioCtx) {
    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  }
  return audioCtx;
}

function playNote(freq) {
  var ctx = getCtx();
  var osc = ctx.createOscillator();
  var gain = ctx.createGain();

  osc.type = 'triangle';
  osc.frequency.value = freq;

  var now = ctx.currentTime;
  gain.gain.setValueAtTime(0.0001, now);
  gain.gain.exponentialRampToValueAtTime(0.3, now + 0.008);
  gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.5);

  osc.connect(gain);
  gain.connect(ctx.destination);

  osc.start(now);
  osc.stop(now + 0.55);
}

NOTES.forEach(function (note) {
  var pad = document.createElement('button');
  pad.className = 'sp-pad';
  pad.style.background = note.color;
  pad.textContent = note.name;
  pad.setAttribute('aria-label', 'Play ' + note.name);

  function trigger() {
    playNote(note.freq);
    pad.classList.add('sp-pressed');
    setTimeout(function () {
      pad.classList.remove('sp-pressed');
    }, 140);
  }

  pad.addEventListener('mousedown', trigger);
  pad.addEventListener('touchstart', function (e) {
    e.preventDefault();
    trigger();
  }, { passive: false });

  grid.appendChild(pad);
});