Il utilise trois nœuds : un {{domxref ("OscillatorNode")}} comme source, un {{domxref ("GainNode")}} pour contrôler le volume et un{{domxref ("AudioDestinationNode")}} comme destination.Notice: Cet outil a été déprécié et sera bientôt supprimé de Firefox. Pour plus de détails voir : Outils Dépréciés.
Avec l'API Web Audio, les développeurs peuvent créer un {{domxref ("AudioContext", "contexte audio")}}. Dans ce contexte, ils peuvent créer différents {{domxref ("AudioNode", "nœuds audio")}} comme :
Chaque nœud à zéro ou plusieurs propriétés {{domxref ("AudioParam")}}. Ces propriétés configurent sa fonction. Par exemple le {{domxref ("GainNode")}} a une seule propriété gain alors que le nœud {{domxref ("OscillatorNode")}} a les propriétés frequency et detune.
Le développeur connecte les nœuds dans un graphique et le graphique une fois complet définit le comportement du flux audio.
L'Éditeur Web Audio examine un contexte audio construit dans la page et fournit une visualisation de son graphique. Cela donne une vue globale de son fonctionnement et permet de vérifier que tous les nœuds sont connectés comme attendu. Il est également possible d’examiner et d'éditer la propriété AudioParam pour chaque nœud du graphique. Quelques propriétés non-AudioParam comme une propriété OscillatorNode's type, sont également affichées et il est aussi possible de les éditer.
Cet outil étant encore expérimental, si vous trouvez des bugs, nous adorerions que vous les reportiez dans . Si vous avez des avis ou des suggestions pour de nouvelles fonctionnalités, dev-developer-tools ou Twitter sont de bon endroit pour les partager.
L'Éditeur Web Audio n'est pas activé par défaut dans Firefox 32. Pour l'activer, il faut ouvrir les options des outils de développement et cocher l'option "Web Audio". Un nouvel onglet nommé "Web Audio" s'ajoute alors à vos outils de développement. Il faut ensuite cliquer sur l’onglet et charger une page avec un contexte audio. Voici deux bons exemples :
L'Éditeur Web Audio affiche alors le graphique correspondant au contexte audio chargé. Voici le graphique du contexte audio de la démo Violent Theremin :
Il utilise trois nœuds : un {{domxref ("OscillatorNode")}} comme source, un {{domxref ("GainNode")}} pour contrôler le volume et un{{domxref ("AudioDestinationNode")}} comme destination.
Afficher les connections aux AudioParams est une des nouveautés de Firefox 34.
Les connections entre les nœuds sont affichés sous la forme de lignes solides. En revanche, si un nœud est connecté à un AudioParam d'un autre nœud, alors la connection est affiché sous la forme d'une ligne pointillée et prend le nom de l'AudioParam :
Cliquer sur un nœud le mettra en surbrillance et affichera un inspecteur de nœuds sur la partie droite. Cet inspecteur, liste les valeurs des propriétés AudioParam du nœud. Par exemple voila à quoi ressemble l'OscillatorNode :
Avec la démo Violent Theremin, le paramètre de fréquence est modifié lorsque l'utilisateur bouge la souris, cela se répercute sur l'inspecteur. Malheureusement la valeur n'est pas modifiée en temps réel : il faut cliquer à nouveau sur le nœud pour voir la nouvelle valeur.
En cliquant sur une valeur de l'inspecteur, il est possible de la modifier en pressant sur Entrée ou Tabulation, la nouvelle valeur est automatiquement prise en compte.
Nouveau dans Firefox 38.
Dans le panneau qui affiche les détails des nœuds, il y a un bouton marche/arrêt :
Cliquer sur ce bouton modifiera le graphique pour contourner le nœud. Le nœud contourné n'aura alors plus aucun effet et sera affiché avec un fond haché :
