En concevant la rétroaction sonore de Lingo Ladders, nous avons dû faire un choix important : télécharger de lourds fichiers audio (MP3/WAV) par le réseau, ou synthétiser les sons par programmation, en temps réel?
Pour offrir une expérience 100 % libre de droits, privée et sans latence, nous avons construit un moteur de synthèse audio dynamique avec l'API Web Audio native de HTML5. Voici comment sont fabriqués les sons rétro de Lingo Ladders.
« Une vraie application web progressive tire parti des processeurs locaux au lieu d'engorger la bande passante avec des téléchargements de fichiers médias. »
1. Le poids des fichiers audio
Les applis web classiques téléchargent leurs fichiers audio par HTTP. Cela pose plusieurs problèmes importants :
- Consommation de bande passante : même de simples effets sonores ajoutent des mégaoctets au chargement initial d'une PWA.
- Latence et délais : télécharger ou mettre en mémoire tampon un son crée un délai perceptible entre le clic du joueur et le son, ce qui gâche la sensation tactile.
- Risques liés aux droits d'auteur : héberger des extraits préenregistrés expose les développeurs à des problèmes de licence.
2. Synthèse d'ondes par programmation
Au lieu de fichiers, Lingo Ladders utilise le processeur pour synthétiser des ondes brutes dans LingoAudioManager (libraries/audio-manager.js).
- Nous créons des OscillatorNodes et des GainNodes locaux pour contrôler les ondes de façon dynamique.
- Par exemple, le son de réussite est un arpège rapide de do majeur, fait de quatre sons sinusoïdaux purs :
- C5 (523,25 Hz) → E5 (659,25 Hz) → G5 (783,99 Hz) → C6 (1046,50 Hz).
- Chaque fréquence suit une courbe de gain exponentielle précise qui évite les clics secs. Le résultat : un carillon rétro chaud et net.
3. Un vibrato par modulation de fréquence
Pour la grande fanfare de victoire, nous sommes allés plus loin. Nous avons créé un oscillateur modulateur indépendant à basse fréquence (5,5 Hz) et branché sa sortie directement sur les entrées de fréquence des notes principales.
Cela produit en temps réel un vibrato aux allures analogiques qui enrichit l'accord final. On obtient une fanfare rétro riche et gratifiante qui pèse exactement zéro octet en téléchargements!