aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/analysernode/frequencybincount
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/fr/web/api/analysernode/frequencybincount
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/fr/web/api/analysernode/frequencybincount')
-rw-r--r--files/fr/web/api/analysernode/frequencybincount/index.html143
1 files changed, 143 insertions, 0 deletions
diff --git a/files/fr/web/api/analysernode/frequencybincount/index.html b/files/fr/web/api/analysernode/frequencybincount/index.html
new file mode 100644
index 0000000000..4d2d37a151
--- /dev/null
+++ b/files/fr/web/api/analysernode/frequencybincount/index.html
@@ -0,0 +1,143 @@
+---
+title: AnalyserNode.frequencyBinCount
+slug: Web/API/AnalyserNode/frequencyBinCount
+translation_of: Web/API/AnalyserNode/frequencyBinCount
+---
+<p>{{ APIRef("Web Audio API") }}<br>
+ <br>
+ La propriété <strong><code>frequencyBinCount</code></strong> de l'objet <a href="https://developer.mozilla.org/fr/docs/Web/API/AnalyserNode" title="L' interface AnalyserNode représente un noeud capable de fournir une fréquence en temps réel et l'analyse des informations temporaires. C'est un AudioNode qui passe le flux audio inchangé depuis l'entrée vers la sortie. Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée."><code>AnalyserNode</code></a> est un nombre entier non signé équivalent à la moitié la taille de la FFT. Il correspond en général au nombre de valeurs que vous aurez à manipuler pour la visualisation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre entier non signé.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec <a href="https://developer.mozilla.org/fr/docs/Web/API/AudioContext" title="L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un AudioNode. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte."><code>AudioContext</code></a>, puis utiliser  <a href="https://developer.mozilla.org/fr/docs/Web/API/Window/requestAnimationFrame" title="La méthode window.requestAnimationFrame() notifie le navigateur que vous souhaitez executer une animation et demande que celui-ci execute une fonction spécifique de mise à jour de l'animation, avant le prochain repaint du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le repaint du navigateur."><code>requestAnimationFrame</code></a> et <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/canvas" title="L'élément HTML Canvas (&lt;canvas>) permet de modifier une zone graphique via un script (habituellement en JavaScript). Par exemple, il peut être utilisé pour dessiner des graphiques, manipuler des images ou jouer des animations. Il peut être utilisé pour l'affichage d'un jeu en ligne ou tout autre contenu interactif. Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc &lt;canvas>. Ce contenu pourra être utilisé par les navigateurs plus anciens ne supportant pas l'élément &lt;canvas> et ceux pour lesquels JavaScript est désactivé."><code>&lt;canvas&gt;</code></a> pour collecter les données temporelles et dessiner un oscilloscopeen sortie. Pour des exemples plus complets, voir notre démo <a class="external external-icon" href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a class="external external-icon" 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">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.minDecibels = -90;
+analyseur.maxDecibels = -10;
+
+ ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(tailleMemoireTampon);
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+
+  analyseur.getByteFrequencyData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5 - 1;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+    hauteurBarre = tableauDonnees[i];
+
+    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+    contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2);
+
+    x += largeurBarre;
+  }
+};
+
+dessiner();</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Spécification</th>
+ <th scope="col">Statut</th>
+ <th scope="col">Commentaire</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}}</td>
+ <td>{{Spec2('Web Audio API')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Fonctionnalité</th>
+ <th>Chrome</th>
+ <th>Edge</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari (WebKit)</th>
+ </tr>
+ <tr>
+ <td>Support basique</td>
+ <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop(25.0)}} </td>
+ <td>{{CompatNo}}</td>
+ <td>15.0{{property_prefix("webkit")}}<br>
+ 22 (unprefixed)</td>
+ <td>6.0{{property_prefix("webkit")}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Fonctionnalité</th>
+ <th>Android</th>
+ <th>Edge</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>Firefox OS</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ <th>Chrome for Android</th>
+ </tr>
+ <tr>
+ <td>Support basique</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>26.0</td>
+ <td>1.2</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>33.0</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="new" href="https://developer.mozilla.org/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>