AnalyserNode: метод getByteFrequencyData()

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

Данные частоты состоят из целых чисел в диапазоне от 0 до 255.

Каждый элемент массива представляет собой значение децибел для определённой частоты. Частоты распределяются линейно от 0 до 1/2 частоты дискретизации. Например, для частоты дискретизации 48000 последний элемент массива будет представлять значение децибел для 24000 Гц.

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

array

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

None (undefined).

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

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

// …

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);

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

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

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

  const barWidth = (WIDTH / bufferLength) * 2.5;
  let barHeight;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
    canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);

    x += barWidth + 1;
  }
}

draw();

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