BaseAudioContext: Methode createWaveShaper()

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.

Die Methode createWaveShaper() der BaseAudioContext-Schnittstelle erstellt einen WaveShaperNode, der eine nichtlineare Verzerrung darstellt. Sie wird verwendet, um Verzerrungseffekte auf Ihr Audio anzuwenden.

Hinweis: Der Konstruktor WaveShaperNode() ist die empfohlene Methode, um einen WaveShaperNode zu erstellen; siehe Erstellen eines AudioNode.

Syntax

js
createWaveShaper()

Parameter

Keine.

Rückgabewert

Beispiele

Das folgende Beispiel zeigt die grundlegende Verwendung eines AudioContext zur Erstellung eines Wave Shaper Node. Für vollständigere Anwendungsbeispiele/informationen besuchen Sie unser Voice-change-O-matic Demo (siehe app.js Zeilen 108–193 für relevanten Code).

Hinweis: Sigmoid-Funktionen werden häufig für Verzerrungskurven verwendet, wegen ihrer natürlichen Eigenschaften. Ihre S-Form trägt beispielsweise dazu bei, ein reibungsloser klingendes Ergebnis zu erzeugen. Wir haben den unten stehenden Code für die Verzerrungskurve auf Stack Overflow gefunden.

js
const audioCtx = new AudioContext();
const distortion = audioCtx.createWaveShaper();

// …

function makeDistortionCurve(amount) {
  const k = typeof amount === "number" ? amount : 50;
  const n_samples = 44100;
  const curve = new Float32Array(n_samples);
  const deg = Math.PI / 180;

  for (let i = 0; i < n_samples; i++) {
    const x = (i * 2) / n_samples - 1;
    curve[i] = ((3 + k) * x * 20 * deg) / (Math.PI + k * Math.abs(x));
  }
  return curve;
}

// …

distortion.curve = makeDistortionCurve(400);
distortion.oversample = "4x";

Spezifikationen

Specification
Web Audio API
# dom-baseaudiocontext-createwaveshaper

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createWaveShaper

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch