AnalyserNode

Интерфейс AnalyserNode представляет узел, способный предоставлять информацию о реальном времени частотного и временного анализа. Это AudioNode, который передает аудиопоток без изменений от входа к выходу, но позволяет получать сгенерированные данные, обрабатывать их и создавать аудиовизуализации.

У AnalyserNode ровно один вход и один выход. Узел работает даже если выход не подключен.

AnalyserNode()

Создает новый экземпляр объекта AnalyserNode.

Наследует свойства от своего родителя, AudioNode.

AnalyserNode.fftSize

Значение unsigned long, представляющее размер преобразования Фурье (Быстрое преобразование Фурье), используемого для определения частотного диапазона.

AnalyserNode.frequencyBinCount Только чтение

Значение unsigned long, в два раза меньше размера преобразования Фурье. Обычно соответствует количеству значений данных, с которыми вам нужно работать для визуализации.

AnalyserNode.minDecibels

Значение double, представляющее минимальное значение мощности в диапазоне шкалирования для данных анализа Фурье, для преобразования в значения unsigned byte — по сути, это определяет минимальное значение для диапазона результатов при использовании getByteFrequencyData().

AnalyserNode.maxDecibels

Значение double, представляющее максимальное значение мощности в диапазоне шкалирования для данных анализа Фурье, для преобразования в значения unsigned byte — по сути, это определяет максимальное значение для диапазона результатов при использовании getByteFrequencyData().

AnalyserNode.smoothingTimeConstant

Значение double, представляющее постоянную усреднения с последней кадровой аналитической информацией — по сути, это сглаживает переход между значениями во времени.

Наследует методы от своего родителя, AudioNode.

AnalyserNode.getFloatFrequencyData()

Копирует текущие данные частоты в массив Float32Array, переданный в него.

AnalyserNode.getByteFrequencyData()

Копирует текущие данные частоты в массив Uint8Array (массив беззнаковых байтов), переданный в него.

AnalyserNode.getFloatTimeDomainData()

Копирует текущие данные волны, или данные временного диапазона, в массив Float32Array, переданный в него.

AnalyserNode.getByteTimeDomainData()

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

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

const audioCtx = new AudioContext();

// …

const analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;

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

// Connect the source to be analyzed
source.connect(analyser);

// Get a canvas defined with ID "oscilloscope"
const canvas = document.getElementById("oscilloscope");
const canvasCtx = canvas.getContext("2d");

// draw an oscilloscope of the current audio source

function draw() {
  requestAnimationFrame(draw);

  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200 200 200)";
  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0 0 0)";

  canvasCtx.beginPath();

  const sliceWidth = (canvas.width * 1.0) / bufferLength;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] / 128.0;
    const y = (v * canvas.height) / 2;

    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