Soundboard – 12 Sound Effects with Web Audio API

88 0 CodeExpert Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Soundboard – 12 Sound Effects with Web Audio API

* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; background: #0e0f17; color: #fff; font-family: "Segoe UI", system-ui, sans-serif; display: grid; place-items: center; padding: 20px; }
.wrap { width: min(760px, 100%); }
header { text-align: center; margin-bottom: 24px; }
h1 { font-size: 2.2rem; }
header p { opacity: .6; margin: 8px 0 14px; }
.vol { display: inline-flex; gap: 10px; align-items: center; opacity: .85; }
.pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pad {
  --c: #ff4d6d; aspect-ratio: 1; border: 0; border-radius: 18px; cursor: pointer; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 85%, #fff), var(--c));
  box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 55%, #000), 0 10px 20px rgba(0,0,0,.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: 1rem; font-weight: 700; transition: transform .08s, box-shadow .08s; user-select: none;
}
.pad .ico { font-size: 2rem; }
.pad kbd { font-family: monospace; font-size: .8rem; background: rgba(0,0,0,.25); padding: 2px 8px; border-radius: 6px; }
.pad.hit { transform: translateY(5px); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 55%, #000), 0 0 30px var(--c); }
@media (max-width: 520px) { .pads { grid-template-columns: repeat(3, 1fr); } .pad .ico { font-size: 1.5rem; } .pad { font-size: .8rem; } }

// Synth Soundboard — every sound is synthesized with Web Audio (no audio files)
var ac, master;
function audio() {
  if (!ac) {
    ac = new (window.AudioContext || window.webkitAudioContext)();
    master = ac.createGain(); master.gain.value = +document.getElementById('vol').value; master.connect(ac.destination);
  }
  if (ac.state === 'suspended') ac.resume();
  return ac;
}
document.getElementById('vol').oninput = function () { if (master) master.gain.value = +this.value; };

function osc(type, f0, f1, dur, vol, delay) {
  var a = audio(), t = a.currentTime + (delay || 0), o = a.createOscillator(), g = a.createGain();
  o.type = type; o.frequency.setValueAtTime(f0, t);
  if (f1) o.frequency.exponentialRampToValueAtTime(f1, t + dur);
  g.gain.setValueAtTime(vol, t); g.gain.exponentialRampToValueAtTime(0.001, t + dur);
  o.connect(g).connect(master); o.start(t); o.stop(t + dur + 0.05);
}
function noise(dur, vol, filterType, freq, delay) {
  var a = audio(), t = a.currentTime + (delay || 0), len = a.sampleRate * dur, buf = a.createBuffer(1, len, a.sampleRate), d = buf.getChannelData(0);
  for (var i = 0; i < len; i++) d[i] = Math.random() * 2 - 1;
  var s = a.createBufferSource(), f = a.createBiquadFilter(), g = a.createGain();
  s.buffer = buf; f.type = filterType; f.frequency.value = freq;
  g.gain.setValueAtTime(vol, t); g.gain.exponentialRampToValueAtTime(0.001, t + dur);
  s.connect(f).connect(g).connect(master); s.start(t);
}

Comments 0

…

Soundboard – 12 Sound Effects with Web Audio API

Recommended

Comments 0