AnalyserNode: метод getFloatTimeDomainData()

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

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

Метод getFloatTimeDomainData() интерфейса AnalyserNode копирует текущие данные волны или данные области времени в массив Float32Array, переданный в него. Каждое значение массива является образцом, величиной сигнала в определённое время.

Синтаксис

getFloatTimeDomainData(array)

Параметры

array: Массив Float32Array, в который будут скопированы данные области времени. Если массив содержит меньше элементов, чем 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 = 1024;
const bufferLength = analyser.fftSize;
console.log(bufferLength);
const dataArray = new Float32Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);
  analyser.getFloatTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200 200 200)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0 0 0)";
  canvasCtx.beginPath();

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

  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] * 200.0;
    const y = HEIGHT / 2 + v;

    if (i === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }
    x += sliceWidth;
  }

  canvasCtx.lineTo(canvas.width, canvas.height / 2);
  canvasCtx.stroke();
}

draw();

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`getFloatTimeDomainData`	35	12	30	22	14.1	35	30	22	14.5	3.0	37

См. также

Использование 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/getFloatTimeDomainData