Entwicklung & Design

Dancer.js: Musik mit JavaScript und HTML5 visualisieren

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

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

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

2 Kommentare

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.