Web Audio API vs fichiers audio pour alarmes web
Générer un son d'alarme à la volée avec la Web Audio API est plus fiable qu'un fichier MP3 chargé. Latence, autoplay, taille : comparatif technique.
Pour faire sonner une alarme dans un navigateur, deux approches coexistent : charger un fichier audio (MP3, WAV) ou générer le son à la volée avec la Web Audio API. Convertly CHRONO a choisi la seconde. Voici pourquoi.
Approche 1 — Fichier audio préchargé
const audio = new Audio('/beep.mp3');
audio.play();Simple, mais trois problèmes :
- Latence variable — le décodage du fichier peut prendre 50 à 300 ms selon l'appareil.
- Échec silencieux — si le fichier n'est pas chargé,
play()ne signale pas toujours l'erreur. - Poids du fichier — même quelques ko à télécharger augmentent le temps avant disponibilité.
Approche 2 — Web Audio API (oscillateur)
const ctx = new AudioContext();
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.frequency.value = 880; // La5
osc.connect(gain).connect(ctx.destination);
osc.start();
osc.stop(ctx.currentTime + 0.3);Le son est synthétisé en temps réel. Aucun fichier à charger, latence négligeable (< 5 ms), contrôle total de la fréquence et de l'enveloppe.
Le piège commun à tous les navigateurs : autoplay
Depuis 2018, Chrome et Safari bloquent toute lecture audio non précédée d'une interaction utilisateur (clic, tap, touche). Que vous utilisiez un fichier ou la Web Audio API, le premier son ne sera jamais joué si l'utilisateur n'a pas interagi avec la page.
Convertly CHRONO contourne le problème en débloquant AudioContext dès le clic sur "Démarrer" — la sonnerie de fin tombe ensuite sans heurt.
Comparatif
| Critère | Fichier MP3 | Web Audio API |
|---|---|---|
| Latence | 50–300 ms | < 5 ms |
| Poids | 2–50 ko à charger | 0 octet |
| Fiabilité hors-ligne | Dépend du cache | Toujours dispo |
| Personnalisation | Multiples fichiers | Fréquence libre |