AnalyserNode.getByteFrequencyData()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
La méthode getByteFrequencyData()
de l'objet AnalyserNode
copie les données de fréquence dans le Uint8Array
passé en argument.
Si le tableau a moins d'éléments que AnalyserNode.frequencyBinCount
, les excédants sont supprimés; s'il en a davantage, les excédants sont ignorés.
Syntaxe
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);
Retourne
Un Uint8Array
.
Exemple
L'exemple suivant montre comment créer simplement un AnalyserNode
avec AudioContext
, puis utiliser requestAnimationFrame
et <canvas>
pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic (et en particulier app.js lines 128–205).
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();
Paramètres
- array
-
Le
Uint8Array
dans lequel seront copiées les données relatives à la fréquence.
Spécifications
Specification |
---|
Web Audio API # dom-analysernode-getbytefrequencydata |
Compatibilité des navigateurs
BCD tables only load in the browser