Wie die Audio-Visualisierung auf audio-visualizer.de entsteht

Audio-Pipeline

Das geladene MP3, WAV oder OGG wird über die HTMLMediaElement-API in den Browser geladen, ohne Server-Roundtrip. Der AudioContext erstellt aus dem Media-Element einen MediaElementAudioSourceNode, der durch einen AnalyserNode läuft und schließlich an die Audio-Destination geht. Der AnalyserNode liefert in jedem Animation-Frame zwei Datenfelder: das aktuelle Frequenz- spektrum (per FFT) und die Wellenform-Daten (Time-Domain).

FFT-Parameter

• fftSize: Standard 2048. Höhere Werte (4096, 8192) liefern feinere Frequenz-Auflösung, kosten aber CPU. Niedrigere Werte (256, 512) reagieren schneller, aber Frequenzbänder werden grob. Wir nutzen 2048 als pragmatischen Mittelwert.
• smoothingTimeConstant: Standard 0.8. Werte zwischen 0 und 1, höhere Werte glätten Spektrum-Updates über mehrere Frames. Für reagierende Equalizer 0.6-0.8, für weiche Wellenform-Animationen 0.85-0.92.
• minDecibels / maxDecibels: Standard -100 / -30 dB. Definieren den dynamischen Bereich des Frequenz-Spektrums. Wir lassen die Defaults stehen, weil sie für Mainstream-Musik gut funktionieren. Klassik mit hohem Dynamic Range benötigt gegebenenfalls -120 / -10.

Visualisierungs-Modi

• Wellenform: Zeichnet die Time-Domain-Daten als kontinuierliche Linie. Funktioniert gut für Songs mit klarem Rhythmus und für Sprache. Verwendet getByteTimeDomainData().
• Frequenzspektrum: Zeichnet die FFT-Daten als gefüllte Fläche. Für die meisten Musikrichtungen visuell ansprechend. Verwendet getByteFrequencyData().
• Bar-Equalizer: Zeichnet die FFT-Daten als vertikale Balken in definierten Frequenzbändern (typisch 32-64 Bänder). Klassische Equalizer-Optik aus den 1990ern.
• Particles: Spawnt Partikel pro Bass-Schlag (Frequenzband 20-150 Hz). Geeignet für Electronic, Hip-Hop, alles mit starkem Bass-Drop.

Export-Pipeline

Beim Export der Visualisierung als Video wird der Canvas-Inhalt mit der captureStream()-API in einen MediaStream konvertiert und mit dem ursprünglichen Audio-Stream zusammengeführt. Der MediaRecorder schreibt diesen kombinierten Stream als WebM (VP9-Codec) in den Browser. Für MP4-Export läuft eine zusätzliche FFmpeg.wasm-Pipeline, die das WebM clientseitig zu MP4 (H.264) transkodiert, was 5 bis 30 Sekunden Wartezeit kostet je nach Videolänge.

Audio-Format-Support

Wir unterstützen alle Formate, die das HTMLMediaElement im jeweiligen Browser nativ dekodiert. Praktisch sind das MP3, WAV, OGG (Vorbis), M4A (AAC) und FLAC in modernen Browsern (Chrome, Firefox, Safari, Edge). Nicht unterstützt sind proprietäre Container-Formate wie WMA (Windows Media Audio) oder spezielle DRM-geschützte Streams.

Review-Zyklus

Die Web Audio API ist seit Jahren stabil, größere Spec-Änderungen sind selten. Wir prüfen halbjährlich die folgenden Punkte:

• Browser-Kompatibilität neuer Audio-Codecs (z.B. Opus, AAC in Safari)
• FFT-Pipeline auf Mobile-Geräten (iOS Safari, Android Chrome)
• WebGL-Renderer-Performance auf neueren GPUs
• Export-Pipeline mit aktuellen FFmpeg.wasm-Versionen

Korrektur-Policy

Wir machen Fehler. Wenn dir ein falscher FFT-Parameter, eine fehlerhafte Format-Angabe oder eine Unstimmigkeit in einem Ratgeber auffällt: info@akara-solutions.de anschreiben, gerne mit Hinweis auf die konkrete Stelle und Browser-Version, in der du den Fehler reproduziert hast. Bestätigte Korrekturen dokumentieren wir öffentlich auf Korrekturen mit Datum, Sachverhalt und Behebung.

Was wir nicht machen

audio-visualizer.de visualisiert von dir geladene Audio-Dateien in Echtzeit im Browser. Wir speichern keine Audio-Dateien auf unseren Servern, weil die gesamte Verarbeitung clientseitig läuft. Wir bieten auch keine Musik-Bibliothek oder Streaming-Funktionen an, die geladene Datei muss von dir kommen.

Verantwortung

Für die hier beschriebene Methodik und ihre redaktionelle Pflege ist Mateusz Viola zuständig. Inhaltlich Verantwortlicher gem. § 18 Abs. 2 MStV ist Eike-Christian Ramcke, Geschäftsführer der AKARA Solutions GmbH (vollständige Angaben im Impressum).