Drücke die Tasten ◄ ► für weitere Artikel  

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

68 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
2 Antworten
  1. von Martin Vennemann via facebook am 09.07.2012 (17:03Uhr)

    yay.. was zum spielen! auf den ersten blick ziemlich vielversprechend

  2. von Dancer.js: Musik mit JavaScript und HTML… am 17.07.2012 (22:12Uhr)

    [...] 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.  [...]

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema JavaScript
Tempy.js: Blitzschnelle Client-Templates mit HTML5-LocalStorage
Tempy.js: Blitzschnelle Client-Templates mit HTML5-LocalStorage

Es gibt viele verschiedene Möglichkeiten zur Realisierung von Client-Side-Templates. Tempy.js nutzt den LocalStorage, um die Aufrufe zu minimieren und die Performance zu steigern. Wir stellen es... » weiterlesen

Google-Maps-Alternative: Leaflet macht interaktive Karten zum Kinderspiel
Google-Maps-Alternative: Leaflet macht interaktive Karten zum Kinderspiel

Leaflet bietet dir eine Alternative zu Google Maps mit zahlreichen Funktionen für interaktive Karten und schränkt dich dabei nicht in der Wahl des Karten-Dienstes ein. Wir zeigen dir, wie du das... » weiterlesen

Basket.js: Bessere Performance beim Caching mit „Web Storage“
Basket.js: Bessere Performance beim Caching mit „Web Storage“

Basket.js nutzt localStorage zum Cachen von Skripten. Wir verraten dir, welche Vorteile das hat und wie du Basket.js nutzen kannst. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen