Success/Error Tone

<div class="snd-tones">
    <button class="snd-tone-btn snd-tone-success" id="sndSuccess">&#9989; Succes</button>
    <button class="snd-tone-btn snd-tone-error" id="sndError">&#10060; Erreur</button>
  </div>

.snd-tones {
  display: flex;
  gap: 16px;
}

.snd-tone-btn {
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s;
}

.snd-tone-btn:active {
  transform: scale(0.95);
}

.snd-tone-success {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.snd-tone-error {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

(function() {
  (function() {
    var ok = document.getElementById('sndSuccess'),
      ko = document.getElementById('sndError');
    if (!ok && !ko) return;
    var ctx = null;

    function audio() {
      return ctx || (ctx = new(window.AudioContext || window.webkitAudioContext)());
    }

    function jouer(freqs, type, pas, duree, vol) {
      var a = audio(),
        t = a.currentTime;
      freqs.forEach(function(f, i) {
        var o = a.createOscillator(),
          g = a.createGain(),
          d = t + i * pas;
        o.type = type;
        o.frequency.setValueAtTime(f, d);
        g.gain.setValueAtTime(0.0001, d);
        g.gain.exponentialRampToValueAtTime(vol, d + 0.015);
        g.gain.exponentialRampToValueAtTime(0.0001, d + duree);
        o.connect(g).connect(a.destination);
        o.start(d);
        o.stop(d + duree + 0.02);
      });
    }
    // arpege majeur qui monte = reussite ; deux notes basses qui descendent = erreur
    if (ok) ok.addEventListener('click', function() {
      jouer([523.25, 659.25, 783.99], 'sine', 0.09, 0.22, 0.1);
    });
    if (ko) ko.addEventListener('click', function() {
      jouer([311.13, 233.08], 'sawtooth', 0.13, 0.3, 0.07);
    });
  })();
})();