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
|
---
title: AnalyserNode.getByteFrequencyData()
slug: Web/API/AnalyserNode/getByteFrequencyData
translation_of: Web/API/AnalyserNode/getByteFrequencyData
---
<p>{{ APIRef("Web Audio API") }}<br>
<br>
La méthode <strong><code>getByteFrequencyData()</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> copie les données de fréquence dans le {{domxref("Uint8Array")}} passé en argument.</p>
<div>
<p>Si le tableau a moins d'éléments que {{domxref("AnalyserNode.frequencyBinCount")}}, les excédants sont supprimés; s'il en a davantage, les excédants sont ignorés.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush: js">var contexteAudio = new AudioContext();
var analyseur = contexteAudio.createAnalyser();
// Uint8Array devrait avoir la même taille que frequencyBinCount
var tableauDonnees = new Uint8Array(analyseur.frequencyBinCount);
// remplit le Uint8Array avec les données retournées par la méthode getByteFrequencyData()
analyseur.getByteFrequencyData(tableauDonnees);
</pre>
<h3 id="Retourne">Retourne</h3>
<p>Un {{domxref("Uint8Array")}}.</p>
<h2 id="Exemple">Exemple</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 (<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 <canvas>. Ce contenu pourra être utilisé par les navigateurs plus anciens ne supportant pas l'élément <canvas> et ceux pour lesquels JavaScript est désactivé."><code><canvas></code></a> pour collecter les données temporelles et dessiner un oscilloscope en 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.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;
var hauteurBarre;
var x = 0;
for(var i = 0; i < tailleMemoireTampon; i++) {
hauteurBarre = tableauDonnees[i];
contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2);
x += largeurBarre + 1;
}
};
dessiner();</pre>
<h2 id="Paramètres">Paramètres</h2>
<dl>
<dt>array</dt>
<dd>Le {{domxref("Uint8Array")}} dans lequel seront copiées les données relatives à la fréquence.</dd>
</dl>
<h2 id="Spécifications">Spécifications</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-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}}</td>
<td>{{Spec2('Web Audio API')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
<p>{{Compat("api.AnalyserNode.getByteFrequencyData")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<p><a class="new" href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></p>
<ul>
</ul>
|
