Les concepts de base de la Web Audio API

La Web Audio API implique d'effectuer le traitement du son dans un contexte audio; elle a été conçue sur le principe de routage modulaire. Les opérations basiques sont effectuées dans noeuds audio, qui sont liés entre eux pour former un graphe de routage audio. Un seul contexte peut supporter plusieurs sources — avec différentes configurations de canaux. Cette architecture modulaire assure la flexibilité nécessaire pour créer des fonctions audio complexes avec des effets dynamiques.

Les noeuds audio sont liés au niveau de leur entrée et leur sortie, formant une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds, et se termine avec une sortie spécifique (bien qu'il ne soit pas nécessaire de spécifier une sortie si, par exemple, vous souhaitez seulement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci :

1. Création d'un contexte audio
2. Dans ce contexte, création des sources — telles que <audio>, oscillateur, flux
3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance, compresseur
4. Choix final de la sortie audio, par exemple les enceintes du système
5. Connection des sources aux effets, et des effets à la sortie.

Chaque entrée ou sortie est composée de plusieurs canaux, chacun correspondant à une configuration audio spécifique. Tout type de canal discret est supporté, y compris mono, stereo, quad, 5.1, etc.

Les sources audio peuvent être de provenance variée :

• générées directement en JavaScript avec un noeud audio (tel qu'un oscillateur)
• créées à partir de données PCM brutes (le contexte audio a des méthodes pour décoder les formats audio supportés)
• fournies par une balise HTML media (telle que <video> ou <audio>)
• récupérées directement avec WebRTC MediaStream (une webcam ou un microphone)

Lors du traitement d'un signal audio, l'échantillonage désigne la conversion d'un signal continu en signal discret; formulé autrement, une onde de son continue, comme un groupe qui joue en live, est convertie en une séquence d'échantillons (un signal temporel discret) qui permet à l'ordinateur de traiter le son en blocs distincts.

On peut trouver davantage de détails sur la page Wikipédia Echantillonage (signal).

Un AudioBuffer prend comme paramètres un nombre de canaux (1 pour mono, 2 pour stéréo, etc), une longueur, qui correspond au nombre de trames d'échantillon dans la mémoire tampon, et un taux d'échantillonage, qui indique le nombre de trames d'échantillons lues par seconde.

Un échantillon est une valeur float32 unique, qui correspond à la valeur du flux audio à un point précis dans le temps, sur un canal spécifique (gauche ou droit dans le cas de la stéréo). Une trame, ou trame d'échantillon est l'ensemble de toutes les valeurs pour tous les canaux (deux pour la stéréo, six pour le 5.1, etc.) à un point précis dans le temps.

Le taux d'échantillonage est le nombre d'échantillons (ou de trames, puisque tous les échantillons d'une trame jouent en même temps) qui sont joués en une seconde, exprimés en Hz. Plus le taux d'échantillonage est élevé, meilleure est la qualité du son.

Prenons deux AudioBuffer, l'un en mono et l'autre en stéréo, chacun d'une durée de 1 seconde et d'une fréquence de 44100Hz:

• le mono aura 44100 échantillons, et 44100 trames. Sa propriété length vaudra 44100.
• le stéréo aura 88200 échantillons, et 44100 trames. Sa propriété length vaudra aussi 44100, puisqu'elle correspond au nombre de trames.

Lorsqu'un noeud de mémoire tampon est lu, on entend d'abord la trame la trame la plus à gauche, puis celle qui la suit à droite, etc. Dans le cas de la stéréo, on entend les deux canaux en même temps. Les trames d'échantillon sont très utiles, car elles représentent le temps indépendamment du nombre de canaux.

Voici quelques exemples simples:

var contexte = new AudioContext();
var memoireTampon = contexte.createBuffer(2, 22050, 44100);

Ce code génère une mémoire tampon stéréo (deux canaux) qui, lorsqu'elle est lue dans un AudioContext à 44100Hz (configuration répandue, la plupart des cartes sons tournant à cette fréquence), dure 0.5 secondes: 22050 trames / 44100Hz = 0.5 secondes.

var contexte = new AudioContext();
var memoireTampon = context.createBuffer(1, 22050, 22050);

Ce code génère une mémoire tampon mono (un seul canal) qui, lorsqu'elle est lue dans un AudioContext à 44100Hzz, est automatiquement *rééchantillonnée* à 44100Hz (et par conséquent produit 44100 trames), et dure 1.0 seconde: 44100 frames / 44100Hz = 1 seconde.

La Web Audio API utilise un format de mémoire tampon linéaire : les canaux gauche et droite sont stockés de la façon suivante :

LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (pour un buffer de 16 trames)

C'est assez courant dans le traitement audio, car cela permet de traiter facilement chaque canal de façon indépendante.

L'alternative est d'utiliser un format entrelacé:

LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (pour un buffer de 16 trames)

Ce format est communément utilisé pour stocker et lire du son avec très peu de traitement, comme par exemple pour un flux de MP3 décodé.

La Web Audio API expose *uniquement* des buffer linéaires, car elle est faite pour le traitement du son. Elle fonctionne en linéaire, mais convertit les données au format entrelacé au moment de les envoyer à la carte son pour qu'elles soient jouées. A l'inverse, lorsqu'un MP3 est décodé, le format d'origine entrelacé est converti en linéaire pour le traitement.

Une mémoire tampon audio peut contenir différents nombres de canaux, depuis les configurations simple mono (un seul canal) ou stéréo (canal gauche et canal droit) en allant jusquà des configurations plus complexe comme le quad ou le 5.1, pour lesquels chaque canal contient plusieurs échantillons de sons, ce qui permet une expérience sonore plus riche. Les canaux sont généralement représentés par les abbréviations standard détaillées dans le tableau ci-après :

Lorsque le nombre de canaux n'est pas le même en entrée et en sortie, on effectue une conversion ascendante ou descendante selon les règles suivantes. Cela peut être plus ou moins controllé en assignant la valeur speakers ou discrete à la propriété AudioNode.channelInterpretation .

Une visualisation audio consiste en général à utiliser un flux de données audio dans le temps (souvent des informations de gain ou de fréquence) pour générer un affichage graphique (comme un graphe). La Web Audio API possède un AnalyserNode qui n'altère pas le signal audio qui le traverse, permettant de générer des données qui peuvent être utilisées par une technologie de visualisation telle que <canvas>.

On peut accéder aux données en utilisant les méthodes suivantes:

AnalyserNode.getFloatFrequencyData()

Copie les données de fréquence dans le tableau Float32Array passé en argument.

AnalyserNode.getByteFrequencyData()

Copies les données de fréquence dans le tableau d'octets non signés Uint8Array passé en argument.

AnalyserNode.getFloatTimeDomainData()

Copie les données de l'onde de forme, ou domaine temporel, dans le Float32Array passé en argument.

AnalyserNode.getByteTimeDomainData()

Copie les données de l'onde de forme, ou domaine temporel, dans le tableau d'octets non signés Uint8Array passé en argument.

Une spatialisation audio (gérée par les noeuds PannerNode et AudioListener dans la Web Audio API) permet de modéliser la position et le comportement d'un signal audio situé dans l'espace, ainsi que l'auditeur qui perçoit ce signal.

La position du panoramique est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité (nécessaire pour la création d'effets Doppler) et sa direction avec un cone de direction. Le cone peut être très large, par exemple dans le cas de sources omnidirectionnelles.

La position de l'auditeur est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité et la direction vers laquelle elle pointe en utilisant deux vecteurs de direction : haut et face. Ceux-ci définissent respectivement la direction vers laquelle pointent le haut de la tête et le bout du nez de l'auditeur, et forment un angle droit entre eux.

En audio, fan-in désigne le processus par lequel un ChannelMergerNode prend une série d'entrées mono entrée et restitue un seul signal multi-canaux :

Fan-out désigne le processus opposé, par lequel un ChannelSplitterNode prend une source multi-canaux en entrée et restitue plusieurs signaux mono en sortie: