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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
---
title: AnalyserNode
slug: Web/API/AnalyserNode
tags:
- API
- AnalyserNode
- Reference
translation_of: Web/API/AnalyserNode
---
<div>{{APIRef("Web Audio API")}}</div>
<p>L' interface <strong><code>AnalyserNode</code></strong><strong> </strong>représente un noeud capable de fournir en temps réel des informations d'analyse de la fréquence et du domaine temporel. C'est un {{domxref("AudioNode")}} qui transmet le flux audio inchangé depuis l'entrée vers la sortie, mais permet de capturer les données générées pour les traiter et/ou les visualiser.</p>
<p>Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée.</p>
<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/12968/fttaudiodata.svg"></p>
<table class="properties">
<tbody>
<tr>
<th scope="row">N<dfn>ombre d'entrées</dfn></th>
<td><code>1</code></td>
</tr>
<tr>
<th scope="row"><dfn>Nombre de sorties</dfn></th>
<td><code>1</code> (mais peut ne pas être connectée)</td>
</tr>
<tr>
<th scope="row"><dfn>Mode de comptage des canaux</dfn></th>
<td><code>"explicit"</code></td>
</tr>
<tr>
<th scope="row"><dfn>Nombre de canaux</dfn></th>
<td><code>1</code></td>
</tr>
<tr>
<th scope="row"><dfn>Interprétation du canal</dfn></th>
<td><code>"speakers"</code></td>
</tr>
</tbody>
</table>
<h2 id="Héritage">Héritage</h2>
<p>L'interface hérite des parents suivants:</p>
<p>{{InheritanceDiagram}}</p>
<h2 id="Constructeur">Constructeur</h2>
<dl>
<dt>{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}</dt>
<dd>Crée une nouvelle instance de l'objet <code>AnalyserNode</code>.</dd>
</dl>
<h2 id="Propriétés">Propriétés</h2>
<p><em>Hérite des propriétés de son parent. </em><em>{{domxref("AudioNode")}}</em>.</p>
<dl>
<dt>{{domxref("AnalyserNode.fftSize")}}</dt>
<dd>Entier long non signé qui représente la taille de la <a href="/en-US/docs/">FFT</a> (transformation de Fourier rapide) qui sera utilisé pour déterminer le domaine fréquentiel.</dd>
<dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
<dd>Entier long non signé égal à la moitié fftSize. C'est en général le nombre de valeurs qu'on manipule pour la visualisation.</dd>
<dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
<dd>Nombre flottant à double précision qui représente la valeur minimale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur minimum de la plage de résultats de <code>getByteFrequencyData()</code>.</dd>
<dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
<dd>Nombre flottant à double précision qui représente la valeur maximale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur maximum de la plage de résultats de <code>getByteFrequencyData()</code>.</dd>
<dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
<dd>Nombre flottant à double précision qui représente la moyenne de la trame en cours avec la dernière trame analysée - elle permet de lisser la transition entre les valeurs.</dd>
</dl>
<h2 id="Méthodes">Méthodes</h2>
<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
<dl>
<dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
<dd>Copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.</dd>
</dl>
<dl>
<dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
<dd>Copie les données de fréquence dans un tableau {{domxref("Uint8Array")}} passé en paramètre.</dd>
<dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
<dd>Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Float32Array")}} passé en paramètre.</dd>
</dl>
<dl>
<dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
<dd>Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Uint8Array")}} passé en paramètre.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<div class="note">
<p><strong>Note</strong>: Voir <a href="/fr/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualisations avec la Web Audio API</a> pour plus d'informations.</p>
</div>
<p>L'exemple suivant montre comment créer simplement un <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
<pre class="brush: js line-numbers language-js"><code class="language-js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
var analyseur = contexteAudio.createAnalyser();
...
analyseur.fftSize = 2048;
var tailleMemoireTampon = analyseur.frequencyBinCount;
var tableauDonnees = new Uint8Array(tailleMemoireTampon);
analyseur.getByteTimeDomainData(tableauDonnees);
// dessine un oscilloscope de la source audio
</code>
<code class="language-js">var canvas = document.getElementById("oscilloscope");
var contexteCanvas = canvas.getContext("2d");
function dessiner() {
requestAnimationFrame(dessiner);
analyseur.getByteTimeDomainData(tableauDonnees);
contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
contexteCanvas.fillRect(0, 0, WIDTH, HEIGHT);
contexteCanvas.lineWidth = 2;
contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
contexteCanvas.beginPath();
var sliceWidth = WIDTH * 1.0 / tailleMemoireTampon;
var x = 0;
for(var i = 0; i < tailleMemoireTampon; i++) {
var v = tableauDonnees[i] / 128.0;
var y = v * HEIGHT/2;
if(i === 0) {
contexteCanvas.moveTo(x, y);
} else {
contexteCanvas.lineTo(x, y);
}
x += sliceWidth;
}
contexteCanvas.lineTo(canvas.width, canvas.height/2);
contexteCanvas.stroke();
};
dessiner();</code></pre>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
<tr>
<td>{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}</td>
<td>{{Spec2('Web Audio API')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
<p>{{Compat("api.AnalyserNode")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
</ul>
|
