1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
---
title: Éditeur Web Audio
slug: Tools/Web_Audio_Editor
tags:
- Tools
translation_of: Tools/Web_Audio_Editor
original_slug: Outils/Editeur_Web_Audio
---
<div>{{ToolsSidebar}}</div>
<div class="blockIndicator note">
<p>Notice: Cet outil a été déprécié et sera bientôt supprimé de Firefox. Pour plus de détails voir : <a href="/fr/docs/Tools/Deprecated_tools">Outils Dépréciés</a>.</p>
</div>
<p>Avec l'<a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">API Web Audio</a>, 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 :</p>
<ul>
<li>Des nœuds fournissant la <a href="/fr/docs/Web/API/Web_Audio_API#Defining_audio_sources">source audio</a>, comme un oscillateur ou une source de "data buffer"</li>
<li>Des nœuds réalisant des transformations tels que Délai ou Gain.</li>
<li>Des nœuds représentant la <a href="/fr/docs/Web/API/Web_Audio_API#Defining_audio_destinations">destination du flux audio</a>, par exemple les hauts parleurs.</li>
</ul>
<p>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é <code>gain</code> alors que le nœud {{domxref ("OscillatorNode")}} a les propriétés <code>frequency</code> et <code>detune</code>.</p>
<p>Le développeur connecte les nœuds dans un graphique et le graphique une fois complet définit le comportement du flux audio.</p>
<p>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é <code>AudioParam</code> pour chaque nœud du graphique. Quelques propriétés non-<code>AudioParam</code> comme une propriété <code>OscillatorNode</code>'s <code>type</code>, sont également affichées et il est aussi possible de les éditer.</p>
<p>Cet outil étant encore expérimental, si vous trouvez des bugs, nous adorerions que vous les <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Web%20Audio%20Editor">reportiez dans <span class="external external-icon">Bugzilla</span></a>. Si vous avez des avis ou des suggestions pour de nouvelles fonctionnalités, <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools</a> ou <a href="http://twitter.com/firefoxdevtools">Twitter</a> sont de bon endroit pour les partager.</p>
<h2 id="Ouvrir_l'Éditeur_Web_Audio">Ouvrir l'Éditeur Web Audio</h2>
<p>L'Éditeur Web Audio n'est pas activé par défaut dans Firefox 32. Pour l'activer, il faut ouvrir les<a href="/fr/docs/Tools/Tools_Toolbox#Settings_2"> options des outils de développement</a> 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 :</p>
<ul>
<li>Le <a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-Matic</a>, qui peut appliquer divers effets à l’entrée du microphone et fournit aussi une visualisation du résultat.</li>
<li>La démo <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, qui change le ton et le volume d'un signal sinusoïdal lorsque l'on bouge la souris.</li>
</ul>
<h2 id="Visualiser_le_graphique">Visualiser le graphique</h2>
<p>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 :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7941/web-audio-editor-graph.png" style="display: block; margin-left: auto; margin-right: auto;">Il utilise trois nœuds : un {{domxref ("OscillatorNode")}} comme source, un {{domxref ("GainNode")}} pour contrôler le volume et un{{domxref ("AudioDestinationNode")}} comme destination.</p>
<h3 id="Connections_aux_AudioParams">Connections aux AudioParams</h3>
<div class="geckoVersionNote">
<p>Afficher les connections aux AudioParams est une des nouveautés de Firefox 34.</p>
</div>
<p>Les connections entre les nœuds sont affichés sous la forme de lignes solides. En revanche, si <a href="/fr/docs/Web/API/AudioNode.connect%28AudioParam%29">un nœud est connecté à un AudioParam d'un autre nœud</a>, alors la connection est affiché sous la forme d'une ligne pointillée et prend le nom de <code>l'AudioParam </code>:<img alt="" src="https://mdn.mozillademos.org/files/8819/web%20audio-editor-connect-param.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Inspecter_et_modifier_les_nœuds_audio">Inspecter et modifier les nœuds audio</h2>
<p>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 <code>AudioParam</code> du nœud. Par exemple voila à quoi ressemble l'OscillatorNode :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7943/web-audio-editor-inspect-node.png" style="display: block; margin-left: auto; margin-right: auto;">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.</p>
<p>En cliquant sur une valeur de l'inspecteur, il est possible de la modifier en pressant sur <kbd>Entrée</kbd> ou <kbd>Tabulation</kbd>, la nouvelle valeur est automatiquement prise en compte.</p>
<h2 id="Contourner_des_nœuds">Contourner des nœuds</h2>
<div class="geckoVersionNote">
<p>Nouveau dans Firefox 38.</p>
</div>
<p>Dans le panneau qui affiche les détails des nœuds, il y a un bouton marche/arrêt :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10183/web-audio-editor-on-off.png" style="display: block; height: 97px; margin-left: auto; margin-right: auto; width: 316px;">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é :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10181/web-audio-editor-bypassed.png" style="display: block; height: 74px; margin-left: auto; margin-right: auto; width: 348px;"></p>
|
