Audio Effekte hinzufügen

Tony Conway
Tony Conway

Die moderne Art

Die Web Audio API verwendet die AudioContext()-Schnittstelle, um Quellen, Filter und Ziele zu verwalten. Nachdem Sie einen neuen AudioContext() erstellt haben, erstellen Sie einen Audioquellknoten, z. B. AudioBufferSourceNode oder OscillatorNode. Betrachten Sie als Beispiel einen einfachen Oszillator mit angewendetem Tiefpassfilter.

Unterstützte Browser

  • 35
  • 12
  • 25
  • 14.1

Quelle

createBiquadFilter()-Methode verwenden

Erstellen Sie zuerst ein neues AudioContext(). Erstellen Sie dann einen Audioquellknoten, z. B. einen AudioBufferSourceNode oder OscillatorNode. Für dieses Beispiel erstellen Sie einen sine-Oszillatorknoten, der ab Beginn der Wiedergabe eine Frequenz von 420 Hz hat.

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioCtx.createOscillator()
oscillator.type = 'sine';
 // Value is in hertz.
oscillator.frequency.setValueAtTime(420, audioCtx.currentTime);

Erstelle als Nächstes mit createBiquadFilter() einen Effektknoten. Lege für den Typ lowpass und die Frequenz fest, die eine Sekunde nach dem Start der Wiedergabe startet. Verbinde dann biquadFilter mit oscillator.

const biquadFilter = audioCtx.createBiquadFilter();
biquadFilter.type = 'lowpass';
biquadFilter.frequency.setValueAtTime(200, audioCtx.currentTime + 1);
oscillator.connect(biquadFilter);

Verbinden Sie schließlich biquadFilter mit dem Ziel des audioCtx, bevor Sie den oscillator starten und nach zwei Sekunden Wiedergabe anhalten.

biquadFilter.connect(audioCtx.destination);
oscillator.start();
oscillator.stop(2);

Der Klang des Oszillators wird durch den nicht betroffenen Filter geleitet und an das Ziel übergeben, also die Lautsprecher Ihres Computers. Nach einer Sekunde der Wiedergabe wird der Filter lowpass wirksam. Nach zwei Sekunden wird der Oszillator angehalten.

Weitere verfügbare Filter und Effekte

Andere Filterknoten können einem AudioContext hinzugefügt werden, um verschiedene Effekte zu erzielen:

  • createWaveShaper() wird verwendet, um einer Quelle Verzerrungen hinzuzufügen.
  • createGain() wird verwendet, um das Gesamtsignal der Quelle zu verstärken, auf die es angewendet wird.
  • createConvolver() wird am häufigsten verwendet, um einer Quelle Nachhall hinzuzufügen.
  • createDelay() wird verwendet, um eine Verzögerung für den Start einer Quelle hinzuzufügen.
  • createDynamicsCompressor() wird verwendet, um die Lautstärke des leisesten Teils einer Quelle zu erhöhen und die Lautstärke der lautesten Teile zu verringern.
  • createPanner() und createStereoPanner() werden zum Ändern der räumlichen Position der Tonausgabe verwendet.

Klassisch

Vor der Einführung der Web Audio API gab es keine Möglichkeit, Audioeffekte im Browser hinzuzufügen. Problemumgehungen durch serverseitiges Rendering und den Wechsel zwischen Streams sind möglich, allerdings kann dadurch viel Netzwerkaufwand anfallen.

Audioelement verwenden

Die einzigen Audioeffekte, die direkt gesteuert werden können, sind Wiedergabe und Lautstärke.

const audio = document.querySelector('audio');
 // Sets audio volume to 50%
audio.volume = 0.5;
// Doubles the playback rate.
audio.playbackRate = 2;

Unterstützte Browser

  • 3
  • 12
  • 3,5
  • 3.1

Quelle

Weitere Informationen

Demo

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔉</text></svg>"
    />
    <title>How to add effects to audio</title>
  </head>
  <body>
    <h1>How to add effects to audio</h1>
    <button type="button">Press to hear audio effect</button>
  </body>
</html>

CSS


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

JS


        const button = document.querySelector('button');

button.addEventListener('click', () => {
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = audioCtx.createOscillator();
  oscillator.type = 'sine';
  // Value is in hertz.
  oscillator.frequency.setValueAtTime(420, audioCtx.currentTime);

  const biquadFilter = audioCtx.createBiquadFilter();
  biquadFilter.type = 'lowpass';
  biquadFilter.frequency.setValueAtTime(200, audioCtx.currentTime + 1);
  oscillator.connect(biquadFilter);

  biquadFilter.connect(audioCtx.destination);
  oscillator.start();
  oscillator.stop(2);
});