🌀 Effekte & Filter

Audio-Verarbeitung und Signalmanipulation

Was sind Audio-Effekte und Filter?

Audio-Effekte und Filter sind Werkzeuge zur Manipulation von Audiosignalen. Sie verändern die Klangcharakteristik durch mathematische Operationen auf dem Audiostream.

💡 Merke: Effekte verändern den Klang, Filter beeinflussen bestimmte Frequenzbereiche.
Audio-Effekte und Filter - Funktionsweise Darstellung verschiedener Audio-Effekte und Filter: Tiefpass, Hochpass, Verzerrung, Verzögerung Originalsignal Tiefpassfilter lässt tiefe Frequenzen durch Hochpassfilter lässt hohe Frequenzen durch Verzerrung verändert Wellenform Niedrige Frequenzen Mittlere Frequenzen Mittlere Frequenzen Hohe Frequenzen Audio-Effekte und Filter
Unterschiedliche Audio-Effekte und Filter: Tiefpassfilter (lässt tiefe Frequenzen durch), Hochpassfilter (lässt hohe Frequenzen durch), Verzerrung (verändert Wellenform)
💡 W3Schools Ressource: Für Informationen über Audio-Filter und deren Anwendung siehe Web Audio Filter auf W3Schools

Grundlegende Filtertypen

Tiefpassfilter (Low-pass Filter)

Lässt tiefe Frequenzen passieren und dämpft hohe Frequenzen.

Hochpassfilter (High-pass Filter)

Lässt hohe Frequenzen passieren und dämpft tiefe Frequenzen.

Bandpassfilter (Band-pass Filter)

Lässt nur einen bestimmten Frequenzbereich passieren.

Notch-Filter (Band-stop Filter)

Dämpft einen bestimmten Frequenzbereich und lässt alle anderen durch.

Gängige Audio-Effekte

Verzerrer (Distortion)

Fügt harmonische Obertöne hinzu und verleiht dem Klang eine raue Qualität.

Verzögerung (Delay)

Spielt das Signal nach einer bestimmten Zeit erneut ab.

Hall (Reverb)

Simuliert die akustischen Eigenschaften eines Raumes.

Modulationseffekte

Implementierung in der Web Audio API

Filter implementieren

const filter = audioCtx.createBiquadFilter();
filter.type = 'lowpass';  // oder 'highpass', 'bandpass', etc.
filter.frequency.value = 1000;  // 1kHz Grenzfrequenz
filter.Q.value = 1.0;  // Resonanz

Effekte implementieren

// Verzögerung
const delay = audioCtx.createDelay(1.0);  // Maximal 1 Sekunde Verzögerung
delay.delayTime.value = 0.5;  // 500ms Verzögerung

// Feedback für Echo-Effekt
const feedback = audioCtx.createGain();
feedback.gain.value = 0.3;

// Verbindungen
source.connect(delay);
delay.connect(feedback);
feedback.connect(delay);  // Feedback-Schleife
delay.connect(audioCtx.destination);

Dynamic Compressor

Ein Kompressor reguliert den Dynamikumfang eines Signals.

const compressor = audioCtx.createDynamicsCompressor();
compressor.threshold.value = -50;  // Schwellwert in dB
compressor.knee.value = 40;        // Weichheit des Übergangs
compressor.ratio.value = 12;       // Kompressionsverhältnis
compressor.attack.value = 0.003;   // Angriffszeit in Sekunden
compressor.release.value = 0.250;  // Haltezeit in Sekunden

Equalizer

Ein Equalizer ist eine Sammlung von Filtern, die verschiedene Frequenzbereiche anheben oder absenken.

Parametric Equalizer

Besteht aus mehreren Bands, die jeweils Frequenz, Gain und Q-Faktor haben.

const eq = {
  low: audioCtx.createBiquadFilter(),
  mid: audioCtx.createBiquadFilter(),
  high: audioCtx.createBiquadFilter()
};

eq.low.type = 'lowshelf';    // Tiefe Frequenzen
eq.mid.type = 'peaking';     // Mittlere Frequenzen
eq.high.type = 'highshelf';  // Hohe Frequenzen

eq.low.frequency.value = 200;
eq.mid.frequency.value = 1000;
eq.high.frequency.value = 5000;

// Verbindungskette
source.connect(eq.low);
eq.low.connect(eq.mid);
eq.mid.connect(eq.high);
eq.high.connect(audioCtx.destination);

Effekte in der Praxis

Podcast-Produktion

Musikproduktion

Game-Audio

Qualitätsaspekte

Effekte maßvoll einsetzen

Computational Cost

Komplexe Effekte benötigen mehr Rechenleistung:

Praktische Übung

Erstelle eine Web-Audio-Anwendung mit folgenden Effekten:

  1. Erstelle einen AudioContext
  2. Füge einen Oszillator als Quelle hinzu
  3. Füge einen Tiefpassfilter hinzu
  4. Füge eine Verzögerung mit Feedback hinzu
  5. Füge einen Kompressor hinzu
  6. Stelle Parameter interaktiv ein
  7. Beobachte die Auswirkungen der verschiedenen Effekte

Erweiterungsideen

Du hast die wichtigsten Audio-Effekte und Filter kennengelernt!

→ Weiter zum Projekt: Audio-Player