AnalyserNode: свойство smoothingTimeConstant

Свойство smoothingTimeConstant интерфейса AnalyserNode — это значение типа double, представляющее собой константу усреднения с последней кадровой анализой. По сути, это усреднение между текущим буфером и последним буфером, который AnalyserNode обработал, что приводит к более плавному изменению значений со временем.

Значение типа double в диапазоне от 0 до 1 (0 означает отсутствие усреднения по времени). Значение по умолчанию — 0.8.

Если значение 0, усреднение не выполняется, а значение 1 означает «значительно перекрывать предыдущий и текущий буферы при вычислении значения», что, по сути, сглаживает изменения при вызовах AnalyserNode.getFloatFrequencyData/AnalyserNode.getByteFrequencyData.

В техническом плане мы применяем окно Блэкмана и сглаживаем значения со временем. Значение по умолчанию подходит для большинства случаев.

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

Если вы хотите узнать о влиянии smoothingTimeConstant(), попробуйте скопировать вышеуказанный пример и установить значение analyser.smoothingTimeConstant = 0; вместо него. Вы заметите, что изменения значений будут гораздо более резкими.

const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
analyser.smoothingTimeConstant = 0.85;

// …

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