AnalyserNode.getByteFrequencyData()

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.

Метод getByteFrequencyData() интерфейса AnalyserNode копирует текущие данные частоты в переданный в него Uint8Array Uint8Array (unsigned byte array).

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

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

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

Синтаксис

js
var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();
var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array должен иметь такой же размер, что и frequencyBinCount

void analyser.getByteFrequencyData(dataArray); // заполняет Uint8Array данными, полученными из getByteFrequencyData()

Параметры

array

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

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

None.

Пример

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

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

  ...

analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var 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);

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

  for(var 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();

Параметры

array

Uint8Array, в который будут скопированы данные частотной области.

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

Specification
Web Audio API
# dom-analysernode-getbytefrequencydata

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

BCD tables only load in the browser

Смотрите также