Accueil > Web > Le Web audio à Best of Web 2015

Le Web audio à Best of Web 2015

Cet article a été initialement rédigé par son auteur en juillet.

Le 5 juin 2015 a eu lieu le premier Best Of Web 2015 à Paris, un rassemblement des meilleurs Meetup de l’année. Cet article fait suite à celui de Stéphane Blanchon sur le déroulement de la journée et celui de Jordane Grenat sur les APIs REST.

Dans cet article nous allons nous intéresser à la conférence Web Audio Now par les chercheurs Samuel Goldszmidt et Norbert Schnell. Les deux chercheurs de l’IRCAM (Institut de Recherche et Coordination Acoustique/Musique) nous ont présenté leurs sujets de recherche. La première présentation de Samuel Goldszmidt portait sur l’état actuel de la Web Audio API, avec quelques exemples comme l’écriture d’une fonction qui joue des notes et cela en 18 lignes de code ! La seconde parlait du projet CoSiMa, que je détaille dans un autre billet intitulé Les Audio Workers à Best of Web 2015.

Prérequis

Avant de commencer, je pense qu’il est bon de reprendre un peu les bases de ce qu’est le son. Le son est une onde acoustique. Concrètement, nos haut-parleurs vibrent pour créer une onde acoustique. Voici une représentation du son :

représentation du son

Plus l’amplitude du son est élevée et plus le son sera perçu comme fort. On joue donc sur l’amplitude pour régler le volume. Avec la période, il est possible de calculer la fréquence (f=1/t); généralement on obtient la valeur de la fréquence en Hertz. Plus la fréquence est élevée et plus le son est aigu, plus elle est faible et plus c’est grave. La musique est juste un assemblage en rythme de différents sons.

 

La Web Audio API

L’histoire de l’audio dans le web

Les prémices du son dans des pages web date de 1995. À l’époque, trois types de balises étaient disponibles : bgsound, embed et applet. Les possibilités étaient très restreintes.

En 1997, le flash est apparu avec un player et Flash Media Server, mais il n’existait toujours pas d’API native.

En 2008, c’est la révolution du HTML5 et l’intégration d’une nouvelle balise.

Enfin, en 2010 le W3C définit la Web Audio API. À l’heure où j’écris ces lignes le document est actuellement en Editor’s draft mais reste parfaitement utilisable sur tous les navigateurs sauf IE. Edge implémente cependant la Web Audio API.

 

La Web Audio API en détail

L’API est de haut niveau et elle permet un contrôle du son en JavaScript. Elle repose sur le principe de routing modulaire, c’est-à-dire que le son possède une entrée à laquelle on va appliquer des nœuds audio pour obtenir le son en sortie. Un nœud audio peut par exemple correspondre à un filtre de certaines fréquences ou à un amplificateur, etc.

Outils pour les développeurs

Petit aparté : Firefox dispose d’un outil très pratique pour le Web Audio qui permet de visualiser tous les nœuds audio ainsi que leurs propriétés.

image d'illustration du plugin de mozilla

Un exemple

Voici comment on peut produire du son avec la Web Audio API :

Dans ce code, la première chose qui est faite c’est de récupérer une instance du contexte audio. Ensuite, on crée un oscillateur qui est par défaut de type sinusoïdale et possède une fréquence de 440hz, ce qui correspond à la note LA.

La troisième ligne connecte l’oscillateur à la destination du contexte audio. Concrètement, avant ces deux lignes nous avions deux nœuds : l’oscillateur et la destination du contexte audio. Maintenant, la sortie de l’oscillateur est branchée à l’entrée du nœud de destination.

Enfin, comme la dernière ligne démarre l’oscillateur immédiatement, notre LA est joué.

Attention avec le garbage collector

Les fuites de mémoire sont très faciles à obtenir avec l’API. En effet, si vous perdez la référence vers un nœud il est impossible pour vous d’aller récupérer ce nœud. Par exemple, si vous exécutez le code de l’exemple au-dessus dans une fonction onClick d’un bouton, vous aurez à chaque clic un nouvel oscillateur créé. Firefox vous montrera alors ce genre de graphiques :

Exemple d'un graphique Firefox avec des fuites mémoires

Vous pouvez d’ailleurs tester à cette adresse la fuite mémoire.

L’API est en avance sur le temps

Vous l’aurez sans doute remarqué sur la dernière ligne de l’exemple, mais pour définir quand l’oscillateur commence on lui spécifie le temps actuel du contexte audio. Ce paramètre est envoyé pour la bonne raison que chaque nœud est en avance sur le temps du contexte audio. Pour faire simple, l’API a le temps du buffer en avance sur le contexte.

Il faut donc faire très attention à ne pas utiliser des setInterval et setTimeout, il est important d’utiliser les événements.

Les Audio Params

Chaque nœud possède un ensemble de fonctions qui permettent de planifier le changement de chacun de leurs attributs. Par exemple pour augmenter progressivement la fréquence de notre précédent oscillateur, il faut faire :

Il existe de nombreuses méthodes pour changer les attributs : setValueAtTime, linearRampToValueAtTime, exponentialRampToValueAtTime, setTargetAtTime, setValueCurveAtTime et cancelScheduledValues.

Les différents types de nœuds

Nous n’avons vu jusqu’ici que deux types de nœud. Il en existe cependant plein d’autres :

  • GainNode, ces nœuds servent à amplifier ou diminuer le signal. Concrètement, ils servent à contrôler le son ;
  • Delay, ce type de nœud ralentit l’entrée avant de la propager à la sortie. Ils peuvent servir à créer un écho ;
  • BiquadFilterNode, type de nœud qui créer un filtre audio. Pour plus d’information sur les filtres, vous pouvez aller voir sur wikipédia ;
  • PannerNode, permet de spatialiser le son. Il est effectivement d’ores et déjà possible de faire un bon jeu de tir en JS avec un son 3D pour permettre aux joueurs de savoir d’où viennent les coups de feu !
  • Convolver, généralement utilisés pour faire de la réverbération, ils servent à reproduire l’ambiance d’une pièce ;
  • SplitterNode, sert à séparer les différentes pistes d’une source audio, par exemple à partir d’une source stéréo on obtient en sortie deux sources : la droite et la gauche ;
  • MergerNode fait exactement le contraire du nœud précédent ;
  • Waveshaper, applique une distorsion aux signaux. Amis guitaristes, cet effet est pour vous !
  • Compressor, permet de réduire le volume des parties les plus fortes et d’augmenter celles qui le sont moins ;
  • AnalyserNode, nœud d’analyse qui permet d’accéder en temps réel aux données du son. Il renvoie en sortie ce qu’il a exactement en entrée. Pratique pour faire un oscilloscope !
  • AudioBufferSourceNode, nœud représentant une source audio (NB : type de nœud qui n’a aucune entrée, comme l’oscillateur). À utiliser uniquement pour les sons courts (inférieurs à une minute) ;
  • MediaElementAudioSourceNode, comme le précédent il représente une source audio mais doit servir pour les sons longs. La source audio provient des balises <audio> et <video>.

Conclusion

Bien que les spécifications W3C ne soient pas entièrement figées, la Web Audio API est d’ores et déjà très complète et implémentée dans les navigateurs récents et sur les terminaux mobiles. Il est même possible dès maintenant de faire des logiciels complexes de retouche audio. À quand une version web de l’autotune ? Nous avons maintenant tous les outils nécessaires pour faire des navigateurs l’OS universel.

Liens connexes

Categories: Web Tags: ,


× 8 = vingt quatre