AnalyserNode: smoothingTimeConstant-Eigenschaft

Ein Double-Wert innerhalb des Bereichs 0 bis 1 (0 bedeutet keine Zeitmittelung). Der Standardwert ist 0.8.

Wenn 0 gesetzt ist, wird keine Mittelung durchgeführt, während ein Wert von 1 bedeutet: "überlappe den vorherigen und den aktuellen Puffer erheblich bei der Berechnung des Wertes", was im Wesentlichen die Änderungen über AnalyserNode.getFloatFrequencyData/AnalyserNode.getByteFrequencyData-Aufrufe glättet.

In technischen Begriffen wenden wir ein Blackman-Fenster an und glätten die Werte über die Zeit. Der Standardwert ist für die meisten Anwendungsfälle ausreichend.

Das folgende Beispiel zeigt die grundlegende Verwendung eines AudioContext, um einen AnalyserNode zu erstellen, dann requestAnimationFrame und <canvas>, um wiederholt Frequenzdaten zu sammeln und eine "Winamp-Balkendiagramm-Ausgabe" des aktuellen Audioeingangs zu zeichnen. Für vollständigere angewandte Beispiele/Informationen sehen Sie sich unser Voice-change-O-matic-Demo an (siehe app.js Zeilen 108–193 für relevanten Code).

Wenn Sie neugierig auf den Effekt sind, den der smoothingTimeConstant() hat, versuchen Sie, das obige Beispiel zu klonen und analyser.smoothingTimeConstant = 0; zu setzen. Sie werden feststellen, dass die Wertänderungen viel abrupt sind.

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

• Verwendung der Web Audio API