How to Play a Level-Up Sound at the End of an Article in Webflow

(function() {
  var fired = false;

  function playLevelUp() {
    var AudioCtx = window.AudioContext || window.webkitAudioContext;
    if (!AudioCtx) return;
    var ctx = new AudioCtx();

    // Level-up melody: do-mi-sol-do (upper octave)
    var notes = [
      { freq: 523, start: 0, dur: 0.1 },    // Do
      { freq: 659, start: 0.12, dur: 0.1 },  // Mi
      { freq: 784, start: 0.24, dur: 0.1 },  // Sol
      { freq: 1047, start: 0.36, dur: 0.3 }, // Do (high)
    ];

    notes.forEach(function(note) {
      var osc = ctx.createOscillator();
      var gain = ctx.createGain();
      osc.connect(gain);
      gain.connect(ctx.destination);
      osc.type = 'square';
      osc.frequency.setValueAtTime(note.freq, ctx.currentTime + note.start);
      gain.gain.setValueAtTime(0.15, ctx.currentTime + note.start);
      gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + note.start + note.dur);
      osc.start(ctx.currentTime + note.start);
      osc.stop(ctx.currentTime + note.start + note.dur + 0.01);
    });
  }

  window.addEventListener('scroll', function() {
    if (fired) return;
    var scrolled = window.scrollY + window.innerHeight;
    var total = document.documentElement.scrollHeight;
    if (scrolled >= total - 100) {
      fired = true;
      playLevelUp();
      var el = document.getElementById('levelup-badge');
      if (el) {
        el.style.display = 'flex';
        setTimeout(function() {
          el.style.opacity = '0';
          el.style.transition = 'opacity 0.5s';
          setTimeout(function() { el.style.display = 'none'; }, 500);
        }, 3000);
      }
    }
  }, { passive: true });
})();

if (typeof confetti === 'function') {
  confetti({ particleCount: 80, angle: 60, spread: 55, origin: { x: 0, y: 0.8 } });
  confetti({ particleCount: 80, angle: 120, spread: 55, origin: { x: 1, y: 0.8 } });
}