Aller au contenu

Easter egg3 min lecture

Comment jouer un son de level up en fin d'article dans Webflow ?

Apprenez à jouer un son de level up quand un visiteur termine de lire un article Webflow avec la Web Audio API.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment jouer un son de level up quand un visiteur termine de lire un article Webflow, avec la Web Audio API.

Exemple

🎮

Son de level up

Do Mi Sol Do — Web Audio API

Do 523Hz Mi 659Hz Sol 784Hz Do 1047Hz

Cliquez pour tester

NoteFréquenceTiming
Do523 Hz0ms
Mi659 Hz120ms
Sol784 Hz240ms
Do (haut)1047 Hz360ms, tenu 300ms

Comprendre la mélodie

La mélodie Do-Mi-Sol-Do est la progression d'accord parfait la plus universellement reconnue comme "victoire" dans la culture gaming. Elle utilise l'oscillateur square de la Web Audio API pour un son rétro 8-bit. Aucun fichier audio n'est nécessaire : tout est généré synthétiquement.

1. Ajoutez un badge level up (optionnel)

Créez un Div avec l'ID levelup-badge en position Fixed, centré, en display none par défaut. Mettez-y un message "⬆ Level Up ! Article terminé" avec votre style.

(function() {
  var fired = false;

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

    // Mélodie de level up : do-mi-sol-do (octave supérieure)
    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 (haut)
    ];

    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 });
})();

3. Combinez avec les confettis

Pour une expérience complète, chargez canvas-confetti dans le head et ajoutez dans la fonction triggerEnd :

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 } });
}

Conclusion

Un son de level up crée un moment mémorable et renforce le sentiment d'accomplissement. Cas d'usage :

  • Articles techniques longs récompensant la lecture complète
  • Tutoriels avec gamification
  • Académies et plateformes de formation

Publié le 20 mai 2026

Sandro DA SILVA

Growth Marketer, expert Webflow et touche à tout. Sandro s'occupe des opérations commerciale, veille au bon déroulement des projets et s’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)

Vous allez notre collaboration, c’est garanti

Prêt à faire décoller votre activité ?

demander un devis

Let’s f*****G GO !!