Web Audio API

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨avril 2021⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La Web Audio API propose un système puissant et flexible pour contrôler les données audio sur internet. Elle permet notamment de sélectionner des sources audio (microphone, flux media), d'y ajouter des effets, de créer des visualisations, d'appliquer des effets de spatialisation (comme la balance), etc.

Concepts et usages

La Web Audio API effectue des opérations dans uncontexte audio; elle a été conçue pour supporter lerouting modulaire. Les opérations audio basiques sont réalisées via desnoeuds audio reliés entre eux pour former ungraphe de routage audio. Plusieurs sources - avec différents types d'agencements de canaux - peuvent être supportées, même dans un seul contexte. Ce design modulaire et flexible permet de créer des fonctions audio complexes avec des effets dynamiques.

Les noeuds audio sont reliés au niveau de leurs entrées et sorties, formant des chaînes ou des réseaux simples. Il peut y avoir une ou plusieurs sources. Les sources fournissent des tableaux d'intensités sonores (échantillons), souvent plusieurs dizaines de milliers par seconde. Ceux-ci peuvent être calculées mathématiquement (avec unOscillatorNode), ou peuvent provenir de fichiers sons ou vidéos (commeAudioBufferSourceNode ouMediaElementAudioSourceNode) ou de flux audio (MediaStreamAudioSourceNode). En réalité, les fichiers sons sont eux-même des enregistrements d'intensités sonores, qui viennent de microphones ou d'instruments électriques, et sont mixés dans une seule onde complexe.

Les sorties de ces noeuds peuvent être liées aux entrées d'autres noeuds, qui mixent ces flux d'échantillons sonores ou les séparent en différents flux. Une modification courante est la multiplications des échantillons par une valeur afin d'en augmenter ou diminuer le volume sonore (comme c'est le cas pour leGainNode). Le son est ensuite lié à une destination (AudioContext.destination), qui l'envoie aux enceintes ou au casque audio. Cette dernière connexion n'est utile que si le son doit être entendu.

Un processus de développement typique avec web audio ressemble à ceci :

Création d'un contexte audio
Dans ce contexte, création des sources — comme<audio>, oscillator, stream
Création de noeuds d'effets, comme la réverbération, les filtres biquad, la balance, le compresseur
Choix de la sortie audio (appelée destination), par exemple les enceintes du système
Connection des sources aux effets, et des effets à la destination

Un diagramme de boîte avec une boîte extérieure intitulée contexte audio et trois boîtes à l'intérieur intitulées source, effets et destination. Les trois boîtes intérieures ont des flèches qui pointent de la gauche vers la droite, indiquant le sens du flux de l'information audio.

Le timing est contrôlé avec une grande précision et une latence faible, ce qui permet aux développeurs d'écrire un code qui réagit précisément aux événements et qui est capable de traiter des échantillons précis, même avec un taux d'échantillonnage élevé. Cela permet d'envisager des applications telles que des boîtes à rythme ou des séquenceurs.

La Web Audio API permet également de contrôler laspatialisation du son. En utilisant un système basé sur le modèleémetteur - récepteur, elle permet le contrôle de la balance ainsi que la gestion de l'atténuation du son en fonction de la distance, ou effet doppler, induite par un déplacement de la source sonore (ou de l'auditeur).

Note :Vous pouvez lire davantage de détails sur l'APIWeb Audio en vous rendant sur notre articleLes concepts de base de l'APIWeb Audio.

Interface de la Web Audio API

La Web Audio API expose 28 interfaces avec des événements associés, classés selon leur fonction en 9 catégories.

Définition du graphe audio

Conteneurs et définitions qui donnent sa forme au graphe audio

AudioContext: Un objetAudioContext désigne un graphe de traitement audio construit à partir de modules reliés entre eux, chacun représenté par un noeud audio (AudioNode). Le contexte audio contrôle la création des noeuds qu'il contient, ainsi que l'exécution du traitement audio, et du décodage. Il est nécessaire de créer unAudioContext avant de faire quoi que ce soit d'autre, puisque tout se passe dans un contexte.
AudioNode: Un objetAudioNode est un module de traitement audio, tel qu'unesource audio (c'est-à-dire un élément HTML<audio> ou<video>), unedestination audio, un module de traitement intermédiaire (par exemple un filtreBiquadFilterNode), ou un contrôle du volumeGainNode).
AudioParam: Un objetAudioParam est un paramètre audio, qui est lié à unAudioNode. On peut lui assigner une valeur ou un changement de valeur, que l'on peut programmer à un moment spécifique et/ou selon un motif particulier.
ended (event): L'évènementended est diffusé lorsque la lecture s'arrête en arrivant à la fin d'un media.

Définition des sources audio

OscillatorNode: Un objetOscillatorNode est un module de traitement audio qui génère la création d'une onde sinusoïdale d'une certaine fréquence.
AudioBuffer: Un objetAudioBuffer est un petit morceau de contenu audio monté en mémoire. Il peut être créé à partir d'un fichier audio avec la méthodeAudioContext.decodeAudioData(), ou à partir de données brutes en utilisantAudioContext.createBuffer(). Une fois décodé sous cette forme, la source audio peut être placée dans unAudioBufferSourceNode.
AudioBufferSourceNode: Un objetAudioBufferSourceNode est une source audio composée de données audio montées en mémoire dans unAudioBuffer. C'est unAudioNode qui se comporte comme une source audio.
MediaElementAudioSourceNode: Un objetMediaElementAudio.SourceNode est une source audio composée d'un élément HTML5<audio> ou<video>. C'est unAudioNode qui se comporte comme une source audio.
MediaStreamAudioSourceNode: Un objetMediaStreamAudio.SourceNode est une source audio composée d'unWebRTC MediaStream (tel qu'une webcam ou un microphone). C'est unAudioNode qui se comporte comme une source audio.

Définition des filtres d'effets audio

BiquadFilterNode: Un objetBiquadFilterNode est un simple filtre de bas niveau. Il peut s'agir de différents types de filtres, contrôle du volume ou égaliseurs graphiques. UnBiquadFilterNode a toujours exactement une entrée et une sortie.
ConvolverNode: Un objetConvolver.Node est unAudioNode qui exécute une circonvolution linéaire sur un AudioBuffer donné, souvent utilisé pour créer un effet de réverbération.
DelayNode: Un objetDelayNode est une ligne à retard numérique, c'est-à-dire un module de traitement automatique qui provoque un délai entre l'arrivée du son en entrée et sa propagation en sortie.
DynamicsCompressorNode: Un objetDynamicsCompressorNode permet un effet de compression, qui réduit le volume des parties les plus fortes du signal de façon à éviter les effets de clipping et la distortion qui peuvent se produire lorsque des sons multiples sont diffusés simultanément.
GainNode: Un objetGainNode représente une modification du volume sonore. C'est un module de traitement audio qui provoque l'application d'ungain aux données récupérées en entrée avant leur propagation vers la sortie.
WaveShaperNode: Un objetWaveShaperNode représente une distortion non linéaire. C'est unAudioNode qui utilise une courbe pour appliquer au signal une distortion de mise en forme des ondes. En dehors de l'effet de distortion évident, il est souvent utilisé pour donner un caractère plus chaleureux au son.
PeriodicWave: Un objetPeriodicWave est utilisé pour définir une forme d'onde périodique qui peut être utilisée pour façonner la sortie d'unOscillatorNode.

Définition des destinations audio

Une fois que le signal audio a été traité, ces interfaces définissent sa destination.

AudioDestinationNode: Un noeudAudioDestinationNode représente la destination finale d'une source audio source dans un contexte donné — en général les enceintes du matériel.
MediaStreamAudioDestinationNode: Un noeudMediaStreamAudio.DestinationNode représente une destination audio constituée d'unMediaStreamWebRTC à une seule pisteAudioMediaStreamTrack; il peut être utilisé de façon similaire à unMediaStream obtenu avecNavigator.getUserMedia. C'est unAudioNode qui se comporte comme une destination audio.

Analyse des données et visualisation

AnalyserNode: Un objetAnalyserNode fournit en temps réel des informations concernant la fréquence et le temps, afin de les analyser et les visualiser.

Division et fusion des pistes audio

ChannelSplitterNode: Un noeudChannelSplitterNode prend en entrée une source audio et sépare ses différentes pistes en une série de sortiesmono.
ChannelMergerNode: Un noeudChannelMergerNode réunit différentes entrées mono en une seule sortie. Chaque entrée devient une des pistes de la sortie unique.

Spatialisation audio

AudioListener: Un objetAudioListener représente la position et l'orientation de l'unique personne écoutant la scene audio utilisée dans la spatialisation audio.
PannerNode: Un noeudPannerNode représente le comportement d'un signal dans l'espace. C'est un module de traitement audio qui décrit sa position avec des coordonnées cartésiennes fondées sur la règle de la main droite; ses mouvements utilisent un vecteur de vélocité et sa directionnalité un cône de direction.

Traitement audio avec JavaScript

Note :Au jour de la publication de la spécification Web Audio API le 29 août 2014, ces fonctionnalités sont dépréciées, et seront bientôt remplacées parAudio_Workers.

ScriptProcessorNode: Un noeudScriptProcessorNode permet de générer, traiter ou analyser du son avec JavaScript. C'est un module de traitement audio qui est lié à deux buffers, l'un en entrée, et l'autre en sortie. Un évènement implémentantAudioProcessingEvent est envoyé à l'objet à chaque fois que le buffer d'entrée reçoit de nouvelles données, et le gestionnaire d'évènement prend fin lorsque les nouvelles données ont été communiquées au buffer de sortie.
audioprocess (event): L'évènementaudioprocess est émis lorsque le buffer d'entrée d'unScriptProcessorNode de la Web Audio API est prêt à être traité.
AudioProcessingEvent: L'objetAudioProcessingEvent est envoyé aux fonctions de rappel (callback) qui écoutent l'évènementaudioprocess.

Traitement audio hors ligne ou en tâche de fond

Il est possible de traiter et exporter un graphe audio très rapidement en tâche de fond — en l'exportant dans unAudioBuffer plutôt que sur les enceintes du matériel — grâce aux objets suivants.

OfflineAudioContext: Un objetOfflineAudioContext est une interfaceAudioContext qui représente un graphe de traitement audio construit à partir de nœuds audio. À la différence d'une interfaceAudioContext standard, une interfaceOfflineAudioContext n'exporte pas vraiment le son, mais le génèreaussi vite que possible dans un buffer.
complete (event): Un évènementcomplete est émis lorsque le rendu d'unOfflineAudioContext est terminé.
OfflineAudioCompletionEvent: TheOfflineAudioCompletionEvent est envoyé aux fonctions de callback qui écoutent l'évènementcomplete event implements this interface.

Audio Workers

Les Audio workers offrent la possibilité de traiter le son directement dans le contexte d'unweb worker. En date du 29 August 2014, ils ne sont encore implémentés par aucun navigateur. Lorsqu'ils seront implémentés, ils remplacerontScriptProcessorNode, et les autres fonctionnalités mentionnées dans la sectionTraitement audio avec JavaScript ci-avant.

AudioWorkerNode: Un objet AudioWorkerNode représente unAudioNode qui interagit avec le thread d'un worker pour générer, traiter, ou analyse le son directement.
AudioWorkerGlobalScope: Un objetAudioWorkerGlobalScope est un objet dérivé d'un objetDedicatedWorkerGlobalScope. Il représente le contexte d'un worker dans lequel un script de traitement audio est lancé; il est conçu pour permettre la génération, le traitement, et l'analyse de données audio directement avec JavaScript dans le thread d'un worker.
AudioProcessEvent: UN objetEvent est transmis aux objetsAudioWorkerGlobalScope pour effectuer un traitement audio.

Objets obsolètes

Les objets suivants étaient définis dans les versions précédentes de la spécification, mais sont maintenant obsolètes et ont été remplacés.

JavaScriptNode: Utilisé pour le traitement du son directement en Javascript. Cet objet est obsolète, et a été remplacé parScriptProcessorNode.
WaveTableNode: Utilisé pour définir une forme d'onde périodique. Cet objet est obsolète, et a été remplacé parPeriodicWave.