t3n News Entwicklung

Dancer.js: Musik mit JavaScript und HTML5 visualisieren

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 . 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:

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

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
Voxel.css: Das kann die quelloffene 3D-Library für das Web
Voxel.css: Das kann die quelloffene 3D-Library für das Web

Voxel.css ist eine leichtgewichtige 3D-Library auf Basis von CSS und JavaScript. Wir verraten euch, was es damit auf sich hat. » weiterlesen

Extensions, Performance und Web-Standards: Diese Features hat Microsofts Edge-Browser 2016 am Start
Extensions, Performance und Web-Standards: Diese Features hat Microsofts Edge-Browser 2016 am Start

Microsoft hat neue Features für seinen Edge-Browser angekündigt. Am spannendsten für Nutzer ist dabei das Thema Extensions, die sollen künftig über den Windows-Store gemanagt werden. » weiterlesen

Firefox verärgert Add-on-Entwickler: Das steckt hinter der neuen API für Erweiterungen
Firefox verärgert Add-on-Entwickler: Das steckt hinter der neuen API für Erweiterungen

Langfristig will Mozilla auf eine neue API für Firefox-Erweiterungen nach dem Vorbild von Chrome und Opera umsteigen. Das würde zwar eine einfachere Portierbarkeit ermöglichen, verärgert aber … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?