Éditeur Web Audio

Avec l'API Web Audio, les développeurs peuvent créer un contexte audio. Dans ce contexte, ils peuvent créer différents nœuds audio comme :

• Des nœuds fournissant la source audio, comme un oscillateur ou une source de "data buffer"
• Des nœuds réalisant des transformations tels que Délai ou Gain.
• Des nœuds représentant la destination du flux audio, par exemple les hauts parleurs.

Chaque nœud à zéro ou plusieurs propriétés AudioParam. Ces propriétés configurent sa fonction. Par exemple le GainNode a une seule propriété gain alors que le nœud 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 Bugzilla. Si vous avez des avis ou des suggestions pour de nouvelles fonctionnalités, ffdevtools.uservoice.com ou Twitter sont de bon endroit pour les partager.

Ouvrir l'Éditeur Web Audio

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 :

• Le Voice-change-O-Matic, qui peut appliquer divers effets à l’entrée du microphone et fournit aussi une visualisation du résultat.
• La démo Violent Theremin, qui change le ton et le volume d'un signal sinusoïdal  lorsque l'on bouge la souris.

Visualiser le graphique

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 OscillatorNode comme source, un GainNode pour contrôler le volume et unAudioDestinationNode comme destination.

Connections aux AudioParams

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 :

Inspecter et modifier les nœuds audio

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.

Contourner des nœuds

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é :