Audio Effekte hinzufügen

Tony Conway

Der moderne Weg

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

Browser Support

  • Chrome: 35.
  • Edge: 12.
  • Firefox: 25.
  • Safari: 14.1.

Source

Methode createBiquadFilter() verwenden

Erstellen Sie zuerst ein neues AudioContext(). Erstellen Sie dann einen Audioquellknoten wie ein AudioBufferSourceNode oder OscillatorNode. In diesem Beispiel erstellen Sie einen sine-Oszillatorknoten mit einer Frequenz von 420 Hertz ab dem Moment der Wiedergabe.

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

Erstellen Sie als Nächstes einen Effektknoten mit createBiquadFilter(). Legen Sie den Typ auf lowpass und die Frequenz so fest, dass sie eine Sekunde nach Beginn der Wiedergabe startet. Verbinden Sie dann den biquadFilter mit dem oscillator.

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

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

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

Der Ton des Oszillators wird durch den unbeeinflussten Filter und weiter zum Ziel geleitet, den Lautsprechern Ihres Computers. Nach einer Sekunde Wiedergabe wird der lowpass-Filter wirksam. Nach zwei Sekunden wird der Oszillator beendet.

Weitere verfügbare Filter und Effekte

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

  • createWaveShaper() wird verwendet, um einer Quelle Verzeichnung 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 Hall hinzuzufügen.
  • createDelay() wird verwendet, um den Start einer Quelle zu verzögern.
  • 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 verwendet, um die räumliche Position der Audioausgabe zu ändern.

Der klassische Weg

Vor der Verfügbarkeit der Web Audio API gab es keine Möglichkeit, Audioinhalten im Browser Effekte hinzuzufügen. Es sind zwar Umgehungen mit serverseitigem Rendering und dem Wechsel zwischen Streams möglich, aber das kann zu einem hohen Netzwerk-Overhead führen.

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;

Browser Support

  • Chrome: 3.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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