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
Cliquez pour tester
| Note | Fréquence | Timing |
|---|---|---|
| Do | 523 Hz | 0ms |
| Mi | 659 Hz | 120ms |
| Sol | 784 Hz | 240ms |
| Do (haut) | 1047 Hz | 360ms, 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.
2. Ajoutez le script dans Footer code
(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
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
