Audio-Visualizer wandeln Ton in Bewegung um. Sie haben sie wahrscheinlich schon als farbige Balken oder Wellen in Musikvideos oder Podcasts gesehen. Der Clou? Sie können selbst einen mit einfachem Code erstellen. In diesem Leitfaden erfahren Sie, wie Sie einen Audio-Visualizer mit HTML, CSS und JavaScript erstellen.

Wir verwenden integrierte Browser-Tools wie die Web Audio API und Canvas. Sie können sogar ein Mikrofon verwenden, um Ihre Stimme zu visualisieren. Für einen sauberen Klang hilft ein Mikrofon wie das Hollyland LARK M2 sehr. Es nimmt klaren Ton mit geringem Rauschen auf, sodass Ihre Visualisierungen besser auf Musik, Sprache oder Instrumente reagieren.

Hollyland LARK M2 - Mini Lavalier Microphone

An incredibly lightweight and compact wireless button microphone that captures high-fidelity audio.

Key Features: 9g Button Size | 48 kHz/24-bit | 40 Hours Battery

Check on Amazon

Wesentliche Tools zur Erstellung eines HTML/CSS/JS Audio-Visualizers

Bevor Sie mit dem Bau beginnen, stellen Sie sicher, dass Sie einige wichtige Tools bereithalten. Alles hier ist kostenlos und anfängerfreundlich.

• Ein moderner Browser (Chrome, Firefox oder Edge)
• Ein Code-Editor (VS Code, Sublime Text usw.)
• Eine lokale Audiodatei (MP3 oder WAV)
• Grundlegendes Verständnis von HTML und JavaScript
• Optional: Ein Mikrofon (wie das LARK M2) für Echtzeit-Eingabe

Wir beginnen mit dem Hochladen einer Datei zur Visualisierung und zeigen dann, wie Sie Ihr Mikrofon verwenden.

Was ist ein Audio-Visualizer?

Ein Audio-Visualizer ist ein Tool, das Ton hört und ihn als Formen darstellt. Dies können Balken, Kreise, Wellen oder etwas anderes sein. Die Formen ändern sich basierend auf Tonhöhe und Lautstärke. Visualizer lesen Frequenz und Amplitude in Echtzeit und wandeln diese Daten in Bewegung um.

Sie machen Audio ansprechender, insbesondere für Podcasts, Musik oder Livestreams.

Die Web Audio API verstehen

Die Web Audio API ermöglicht JavaScript, Ton zu analysieren und zu manipulieren. Sie ermöglicht Ihnen Dinge wie:

• Audiodateien abspielen
• Ihr Mikrofon verwenden
• Frequenzen visualisieren
• Filter und Effekte anwenden

Wir verwenden den AnalyserNode, um Echtzeit-Frequenzdaten zu lesen, und die Canvas API, um darauf reagierende Balken zu zeichnen.

Komplettes Tutorial zum Programmieren eines Audio-Visualizers mit HTML/JS

Wenn Sie neu in HTML sind, keine Sorge. Gehen wir durch, was dieser Codeblock tut, damit Sie genau wissen, was Sie bauen und warum jeder Teil wichtig ist.

Schritt 1: Dokumenttyp deklarieren und HTML-Dokument starten

Diese Zeile teilt dem Browser mit, dass Sie ein HTML5-Dokument schreiben. Sie wird immer ganz oben in Ihrer HTML-Datei platziert. Starten Sie dann das HTML-Dokument mit dem Tag.

Schritt 2: HTML-Dokument starten

Dies öffnet den Hauptcontainer für Ihre HTML-Seite. Das Attribut lang=”en” teilt dem Browser (und Suchmaschinen) einfach mit, dass Ihre Seite in Englisch verfasst ist.

Schritt 3: Head-Bereich

Alles innerhalb des Tags enthält Einstellungen und Metadaten für Ihre Webseite.

• : Dies stellt sicher, dass Ihre Seite alle Standardzeichen, einschließlich Sonderzeichen, unterstützt.
• : Dies verbindet Ihre HTML-Seite mit einer externen CSS-Datei, die steuert, wie Ihr Visualizer aussieht.

Schritt 4: Body-Inhalt

Hier befinden sich alle sichtbaren und interaktiven Teile Ihrer Webseite:

• Audio-Visualizer

  : Eine Überschrift. Diese erscheint oben auf der Seite, um Benutzern mitzuteilen, wofür das Tool ist.
• : Dies erstellt eine Dateiupload-Schaltfläche. Wenn der Benutzer darauf klickt, kann er eine Audiodatei von seinem Computer auswählen. So speisen wir Ton in den Visualizer ein.
• : Dies ist der Zeichenbereich. Das JavaScript, das Sie später schreiben, wird diesen Canvas verwenden, um farbige Balken und Formen zu zeichnen, die sich mit dem Audio bewegen.
• : Dies lädt Ihre JavaScript-Datei. Dort liegt die gesamte Logik für den Visualizer, einschließlich der Audiowiedergabe und der Animation der Balken.

Schritt 5: HTML schließen

Dies beendet einfach Ihr HTML-Dokument, während ein Dateieingabefeld und ein Canvas zum Zeichnen der Visualisierung hinzugefügt werden.

Schritt 6: Seite gestalten (style.css)

Dieser Teil Ihres Projekts steuert, wie Ihre Seite aussieht. Wir ändern nicht, wie etwas funktioniert, sondern nur, wie es den Benutzern angezeigt wird. Lassen Sie uns dies Schritt für Schritt aufschlüsseln.

Der Body-Stil

body {

background-color: #111;

color: white;

font-family: Arial, sans-serif;

text-align: center;

}

• background-color: #111; Dies verleiht der gesamten Seite einen dunkelgrauen (fast schwarzen) Hintergrund. Es hilft den farbigen Audio-Balken, hervorzustechen.
• color: white;
  Der gesamte Text auf der Seite (wie die Überschrift) wird in Weiß angezeigt.
• font-family: Arial, sans-serif;
  Stellt den Text so ein, dass zuerst die Schriftart Arial verwendet wird. Wenn diese nicht verfügbar ist, wird auf eine generische serifenlose Schriftart zurückgegriffen. Dies hält den Text sauber und modern.
• text-align: center;
  Dies zentriert die Überschrift und andere Textelemente in der Mitte der Seite.

Der Canvas-Stil

canvas {

background-color: black;

margin-top: 20px;

display: block;

margin-left: auto;

margin-right: auto;

border: 2px solid #444;

}

• background-color: black;
  Setzt den Canvas (den Bereich, in dem die Animation stattfindet) auf reines Schwarz, was Ihrem Visualizer ein elegantes Aussehen verleiht.
• margin-top: 20px;
  Fügt Abstand zwischen dem Canvas und der Überschrift oder dem Dateieingabefeld hinzu.
• display: block;
  Stellt sicher, dass der Canvas wie ein Blockelement behandelt wird, damit Sie ihn richtig gestalten können.
• margin-left: auto;
  margin-right: auto;
  Diese beiden Zeilen zentrieren den Canvas horizontal auf der Seite.
  
• border: 2px solid #444;
  Zeichnet einen dünnen, dunkelgrauen Rahmen um den Canvas. Dies verleiht dem Visualizer ein gerahmtes, poliertes Aussehen.

Schritt 7: JavaScript hinzufügen (app.js)

Diese Zeilen greifen Elemente aus Ihrem HTML ab:

• fileInput ist die Dateiauswahl
• canvas ist der Ort, an dem die Animation erscheinen wird
• ctx ist der Zeichenkontext. Er ermöglicht uns, mit 2D-Formen auf den Canvas zu zeichnen

Schritt 8: Canvas-Größe festlegen

Dies legt die Canvas-Dimensionen auf 800 Pixel Breite und 300 Pixel Höhe fest.

Schritt 9: Auf Dateiupload warten

Diese Zeile teilt dem Browser mit: „Wenn jemand eine Audiodatei hochlädt, führen Sie den Code innerhalb dieser Funktion aus.“

Schritt 10: Audio-Kontext einrichten

Dies erstellt einen neuen Audio-Kontext. Es ist eine spezielle Umgebung, in der Ton analysiert oder modifiziert werden kann.

Schritt 11: Datei laden

Dies ruft die vom Benutzer ausgewählte Datei ab und richtet einen Reader ein, um sie zu dekodieren.

Schritt 12: Audiodatei dekodieren

Wenn die Datei geladen ist, dekodiert diese Funktion die Audiodaten in ein Format, das der Browser verstehen kann.

Schritt 13: Audioquelle erstellen

Dies erstellt eine neue Audioquelle und verbindet sie mit dem dekodierten Audio.

Schritt 14: Analysator erstellen

Hier wird der AnalyserNode eingerichtet, um Frequenzdaten zu lesen. fftSize steuert, wie detailliert die Messung ist. Das dataArray speichert diese Frequenzwerte als Zahlen, die wir zum Zeichnen von Visualisierungen verwenden können.

Schritt 15: Knoten verbinden

Dies verbindet alles in einer Kette:

1. Die Quelle sendet Ton an den Analysator.
2. Der Analysator sendet Ton an die Lautsprecher.
3. Die Quelle beginnt mit der Wiedergabe.

Schritt 16: Die Animationsfunktion

Diese Funktion zeichnet die Balken und ruft sich selbst immer wieder auf, wodurch eine Schleife entsteht, die etwa 60 Mal pro Sekunde läuft.

Schritt 17: Frequenzdaten abrufen

Dies füllt das dataArray mit Frequenzwerten von 0 bis 255.

Schritt 18: Canvas leeren

Diese Zeilen malen den Canvas schwarz, bevor neue Balken gezeichnet werden, damit Sie keine visuelle Unordnung erhalten.

Schritt 19: Balkenabmessungen einrichten

Wir berechnen, wie breit jeder Balken sein soll, und beginnen dann von links (x = 0) zu zeichnen.

Schritt 20: Balken zeichnen

Die Höhe jedes Balkens basiert auf dem Frequenzwert. Die Farbe ändert sich leicht je nach Höhe, wodurch ein cooler animierter Effekt entsteht.

• ctx.fillRect() zeichnet jedes Rechteck.
• Wir bewegen x jedes Mal vorwärts, um die Balken gleichmäßig zu verteilen.

Schritt 21: Animation starten

Dies startet die Animationsfunktion, sobald das Audio abgespielt wird.

Schritt 22: Audiodaten lesen

Schließlich weist diese Zeile den Reader an, mit der Verarbeitung der hochgeladenen Audiodatei zu beginnen.

Wie man ein Mikrofon für die Live-Audio-Visualisierung verwendet

So nehmen Sie Live-Sound anstelle einer Datei auf:

Hier glänzt das LARK M2. Es ist kabellos, leicht und liefert sauberen, ausgewogenen Klang. Wenn Sie Live-Sound visualisieren, ist die Mikrofonqualität entscheidend. Das LARK M2 hilft, Aussetzer und Rauschspitzen zu vermeiden.

Datei vs. Mikrofon: Welches sollten Sie verwenden?

Bonus: Probieren Sie einen kreisförmigen Audio-Visualizer für einen einzigartigen Look

Möchten Sie etwas anderes? Probieren Sie diese radiale Visualisierung:

Dies erzeugt einen pulsierenden Ring aus Punkten, ideal für Musik- oder Meditations-Tracks.

Wie Sie Ihren Audio-Visualizer gestalten und personalisieren

• Probieren Sie Verläufe mit ctx.createLinearGradient()
• Canvas an Fenstergröße anpassen
• Pause-/Wiedergabe-Schaltflächen für Benutzersteuerung hinzufügen
• Bildschirm aufnehmen, um es in ein Video umzuwandeln
• Verwenden Sie ctx.globalAlpha für ausklingende Spuren

Vom Code ins Web: Veröffentlichen Sie Ihren Visualizer einfach

Möchten Sie Ihre Arbeit teilen?

1. Kostenlos auf GitHub Pages oder Netlify hosten
2. Laden Sie Ihr HTML, CSS und JS hoch
3. Link zu Ihrer Live-Seite
4. Bonus: Fügen Sie Audio- und visuelles Branding hinzu, um es persönlich zu gestalten

Fazit

Sie haben gerade Ihren eigenen funktionierenden Audio-Visualizer gebaut! Egal, ob Sie Dateien oder ein Live-Mikrofon wie das Hollyland LARK M2 verwenden, Sie haben jetzt ein Projekt, das Klang zum Leben erweckt.

Sie haben gelernt, wie man:

• Die Web Audio API zur Klanganalyse verwenden
• Visualisierungen auf Canvas zeichnen
• Ton von einer Datei oder einem Mikrofon aufnehmen
• Balken- und Kreis-Animationen erstellen

Experimentieren Sie jetzt. Probieren Sie neue Formen aus, kombinieren Sie Tools oder verbinden Sie es mit Musik-Apps. Die kreativen Möglichkeiten sind endlos.

FAQs

1. Kann ich dies mit Musik-Streaming-Apps verwenden?

Nicht direkt. Aufgrund von Browser-Sicherheit und Urheberrecht können Sie nicht auf Streams von Apps wie Spotify zugreifen. Verwenden Sie stattdessen heruntergeladene Dateien oder einen Mikrofoneingang.

2. Funktioniert dies auf Mobilgeräten?

Meistens ja. Aber einige Browser schränken die Audiowiedergabe und den Mikrofonzugriff ein. Es ist am besten, zuerst auf einem Desktop zu testen und dann für Mobilgeräte anzupassen.

3. Wie kann ich dies als Video speichern?

Verwenden Sie Bildschirmaufnahme-Software wie OBS oder Loom. Sie können den Visualizer dann in Musikvideos, Reels oder Intros bearbeiten.