AnalyserNode: метод getByteTimeDomainData()

Базовая Широко доступная

Эта функция хорошо отработана и работает во многих устройствах и версиях браузеров. Она доступна в браузерах с апреля 2021 года.

Метод getByteTimeDomainData() интерфейса AnalyserNode копирует текущие данные формы волны, или данные временной области, в Uint8Array (массив беззнаковых байтов), переданный в него.

Если массив имеет меньше элементов, чем AnalyserNode.fftSize, избыточные элементы отбрасываются. Если он имеет больше элементов, чем необходимо, избыточные элементы игнорируются.

Синтаксис

getByteTimeDomainData(array)

Параметры

array: Uint8Array, в который будут скопированы данные временной области. Если массив имеет меньше элементов, чем AnalyserNode.fftSize, избыточные элементы отбрасываются. Если он имеет больше элементов, чем необходимо, избыточные элементы игнорируются.

Возвращаемое значение

Ничего (undefined).

Примеры

Следующий пример демонстрирует базовое использование AudioContext для создания AnalyserNode, затем requestAnimationFrame и <canvas> для многократного сбора данных временной области и построения выходных данных в стиле "осциллографа" текущего аудио ввода. Для более полных примеров/информации, ознакомьтесь с нашей демонстрацией Voice-change-O-matic (см. строки 108–193 в app.js для соответствующего кода).

const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();

// …

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

// draw an oscilloscope of the current audio source
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 (let 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();

Спецификации

Спецификация
Web Audio API # dom-analysernode-getbytetimedomaindata

Совместимость с браузерами

	Десктопные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`getByteTimeDomainData`	14	12	25	15	6	18	25	14	6	1.0	4.4.3

См. также

Использование Web Audio API

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getByteTimeDomainData