AnalyserNode.getByteTimeDomainData()

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 getByteTimeDomainData() de l'interface AnalyserNode copie les données de forme d'onde, ou du domaine temporel, dans un tableau Uint8Array passé en paramètre.

Si le tableau a moins d'éléments que la propriété AnalyserNode.fftSize, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.

Syntaxe

js
var contexteAudio = new AudioContext();
var analyseur = contexteAudio.createAnalyser();

// La taille du tableau Uint8Array doit correspondre à la valeur de la propriété fftSize
var tableauDonnees = new Uint8Array(analyseur.fftSize);

// remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData()
analyseur.getByteTimeDomainData(tableauDonnees);

Renvoie

Un tableau 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 lignes 128–205).

js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();

  ...

analyser.fftSize = 2048;
const bufferLength = analyser.fftSize;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// dessine un oscilloscope pour la source audio courante
function draw() {
  drawVisual = requestAnimationFrame(draw);
  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = 'rgb(200, 200, 200)';
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = 'rgb(0, 0, 0)';

  const sliceWidth = WIDTH * 1.0 / bufferLength;
  let x = 0;

  canvasCtx.beginPath();
  for(var i = 0; i < bufferLength; i++) {
    const v = dataArray[i]/128.0;
    const y = v * HEIGHT/2;

    if(i === 0)
      canvasCtx.moveTo(x, y);
    else
      canvasCtx.lineTo(x, y);

    x += sliceWidth;
  }

  canvasCtx.lineTo(WIDTH, HEIGHT/2);
  canvasCtx.stroke();
};

draw();

Paramètres

array

Le tableau Uint8Array dans lequel les données temporelles seront copiées.

Spécifications

Specification
Web Audio API
# dom-analysernode-getbytetimedomaindata

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi