Vorheriger Artikel Nächster Artikel

Dancer.js: Musik mit JavaScript und HTML5 visualisieren

Dancer.js ist eine Audiobibliothek, die mittels und schicke zum Beat passende Musikvisualisierungen möglich macht. Dancer.js funktioniert mit der Web Audio für Webkit-Browser und der Audio Data API für Mozilla. Wir stellen euch Dancer.js kurz vor.

Dancer.js: Musik mit JavaScript und HTML5 visualisieren
Dancer.js Demovisuaisierung

Audiofrequenzen auf den Beat genau sichtbar machen mit Dancer.js

Jordan Santell hat mit Dancer.js eine JavaScript API entwickelt, mit der man Musik beatgenau visualisieren kann. Dafür erzeugt man zuerst eine Dancer-Instanz, in der man den Pfad auf die Musikquelle und das gewünschte Format wie z.B. mp3, ogg oder wav definiert. Dann kann man mit unterschiedlichen API-Methoden das Abspielen der Audiodatei steuern und hat einfachen Zugriff auf z.B. Abspielzeit, Frequenz oder Spektrum. Die Dancer.js API erlaubt so das zur Musik passende Zuordnen von beliebigen Visualisierungesereignissen zu jedem Abschnitt des abzuspielenden Songs. Wie das aussehen kann, zeigt eine schicke Demovisualisierung:

Dancer.js Demo mit beatgenauer Visualisierung

Voraussetzung für den Einsatz von Dancer.js sind die HTML5 Audio APIs von Chrome (Web Audio API) und Firefox (Audio Data API). Für andere Browser neben und Mozilla, die HTML5 und die Audio APIs nicht verstehen, steht eine Flash-Fallback-Lösung zur Verfügung.

Dancer.js kann samt Beispielen und Spezifikation bei GitHub kostenlos heruntergeladen werden.

Weiterführende Links:

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Keine Antwort
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema JavaScript
Vom Code zur App: Programmieren lernen mit coolen Timelapse-Videos
Vom Code zur App: Programmieren lernen mit coolen Timelapse-Videos

TheCodePlayer zeigt euch im Zeitraffer, wie Projekte in HTML5, CSS und JavaScript entstehen. Links seht ihr wie der Code eingegeben wird, während das Projekt auf der rechten Seite mehr und mehr … » weiterlesen

Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst
Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst

Mit Breach gibt es einen neuen Open-Source-Browser, dessen Oberfläche vollständig in JavaScript geschrieben wurde. Dank der modularen Natur des Browsers soll sich das Interface per JavaScript und … » weiterlesen

Opera-Gründer stellt neuen Browser vor: Das steckt hinter Vivaldi
Opera-Gründer stellt neuen Browser vor: Das steckt hinter Vivaldi

Der Mitbegründer und langjährige Opera-Chef Jon von Tetzchner hat mit Vivaldi eine frühe Version eines neuen Browser vorgestellt. Was der kann, und wo die Reise noch hingehen soll, verraten wir … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 38 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen