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 523HzMi 659HzSol 784HzDo 1047Hz
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) ];
La Web Audio API nécessite une interaction utilisateur préalable pour fonctionner (politique autoplay). Le scroll compte comme une interaction : un utilisateur qui scrolle jusqu'à la fin de l'article aura forcément interagi avec la page, donc le son se jouera. Ne déclenchez jamais ce son au chargement de la page sans interaction préalable.
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 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.