Pour les besoins d'une petite application perso j'ai eu besoin de lire des fichiers audio en boucle dans une page web. À ma grande surprise ce n'est pas si simple d'avoir une vraie boucle sans blanc. Voici donc un aperçu des différentes solutions testées et la solution retenue.

Le fichier que nous allons utiliser pour nos tests est le suivant :

Méthode 1 : élément "<Audio>" et propriété "loop"

Comme nous dit la documentation, un élément audio contient une propriété "loop" qui  "S'il est renseigné, la lecture du fichier se fera en boucle."

OK super c'est pile poil ce que je veux faire, allons-y :

Oups, on dirait qu'il y a comme un souci... Qu'est-ce que c'est que ce blanc énorme entre 2 lectures !?

Comme vous pouvez le constater la boucle est loin d'être parfaite, l'élément audio introduit un blanc énorme entre la fin d'une lecture et la suivante !

On va donc essayer autre chose...

Méthode 2 : élément "<Audio>" et loop "manuelle"

Mon deuxième essai pour une lecture en boucle "parfaite" a été de gérer manuellement le cycle de la boucle et d'utiliser la propriété "currentTime" sur l'élément Audio afin de revenir au début du fichier au bon moment pour relancer la lecture.

Après tout, je connais la durée de mon fichier audio, donc pourquoi ne pas gérer la boucle moi-même...

OK donc allons-y, un élément audio, un "setInterval" et c'est réglé :

Pas mal ! Enfin, en tout cas sous Chrome, ça fait le Job...

Mais en réalité le comportement est très aléatoire ! Pour ma part, sous Chrome c'est presque nickel, en revanche sous Firefox ou d'autres navigateurs le résultat est très aléatoire.

Il y'a également un risque de désynchronisation avec cette méthode si le timing n'est pas parfait.

Bien sûr il est possible d'ajuster la durée de notre "setInterval" mais personnellement, après de nombreux essais, je n'ai jamais réussi à avoir un seul réglage qui soit correct sur tous les clients.

Encore une fois on va essayer une autre piste...

Méthode 3 : "Web Audio API" et "Audio Buffer"

Alerte spoiler : cette fois ci, c'est la bonne !

Donc après ces 2 essais peu concluants, je me suis penché sur la"Web Audio API" et plus particulièrement sur l'interface "AudioBufferSourceNode".

Pour faire simple il s'agit d'un nœud audio créé à partir d'un buffer de données et qu'il est possible de "brancher" sur la sortie audio de votre page web. Je vous invite à lire les 2 pages de documentation référencées ci-dessus ainsi que la page de documentation des "AudioNode" afin de bien comprendre le fonctionnement de l'API audio.

L'idée est donc de charger notre fichier audio dans un "ArrayBuffer" puis de l'utiliser en tant que noeud audio pour la lecture. Un "AudioBufferSourceNode" ayant également une propriété "loop" nous devrions pouvoir obtenir une boucle "parfaite".

Et bah voilà !! C'est quand même compliqué pour pas grand chose...

Voici donc un code qui fonctionne et qui fonctionne sur tous les navigateurs et devices.

Attention quand même, un "petit" détail mais qui a son importance :

UnAudioBufferSourceNode ne peut être joué qu'une seule fois; autrement dit un seul appel à la fonction AudioBufferSourceNode.start() est autorisé.

Tips / Retour d’expérience

Vous avez sûrement remarqué la suivante ligne dans le dernier codepen : 

audioSource.loopEnd = loopTime;

Il s'agit donc ici de dire à l'API audio à quel moment la boucle se termine. Je vous conseille vivement de définir cette propriété pour tous vos fichiers audio, même s'ils sont parfaitement coupés.

J'ai constaté des écarts d’interprétation de durée  (par l'API Audio) pour des fichiers ayant pourtant la même durée sous des logiciels comme Audacity ou autre (quelques millisecondes mais suffisamment pour provoquer une désynchronisation entre plusieurs samples).

Conclusion

Il est donc possible de lire un fichier audio en boucle sans avoir de blanc en utilisant la "Web Audio API".

Si vous souhaitez manipuler des fichiers audio même de façon simple, je vous incite fortement à jeter un coup d'oeil à la documentation de la "Web Audio API", ce n'est pas si compliqué que ça en a l'air et vous aurez ainsi une bonne maîtrise de vos flux/nœuds audio.

"Bonus" : j'évoquais une petite application perso en introduction, voici l'application en question : https://romgerebox.mestres.fr