Skip to content

3D Music Maze

Screenshot von 3D Music Maze

Wenn ihr einen modernen Browser mit WebGL-Unterstützung nutzt, z.B. Firefox 4.0 oder Google Chrome 9 und neuer, dann solltet ihr euch unbedingt 3D Music Maze ansehen. 3D Music Maze ist ein dreidimensionales Labyrinth, durch das ihr im Browser laufen könnt. Es erinnert an frühe Ego-Shooter wie Castle Wolfenstein oder Doom.

Die Wände bestehen allerdings nicht aus modrigen Steinblöcken, sondern aus Album-Covern. Mit den Pfeiltasten navigiert ihr durchs Labyrinth, und wenn ihr einmal gegen die Wand rennt, fängt Musik vom entsprechenden Album zu spielen an. Großartig! Wer sich einen Überblick über das gesamte Spielfeld verschaffen möchte, drückt die Leertaste und erhebt sich für kurze Zeit in die virtuellen Lüfte.

Um das Demo noch etwas spannender zu gestalten, ist irgendwo im Labyrinth ein kleines Spiel namens "Save Justin Bieber from the death metal". Was sich dahinter verbirgt, wird an dieser Stelle nicht verraten, ist doch klar!

Geschrieben wurde 3D Music Maze von Paul Lamere in seinen Weihnachtsferien. Er nutzte dafür die faszinierende Javascript 3D-Engine three.js und fragt im Hintergrund Daten von Echo Nest und 7Digital ab.

Ich finde es immer wieder toll, welche kleinen, feinen Tools findige Programmierer mit relativ einfachen Mitteln in kurzer Zeit auf die Beine stellen können, einfach indem sie bereits bestehende Schnittstellen und Bibliotheken nutzen. Die Hacks vom Music Hackday Berlin, der im Mai 2011 stattgefunden hat, zeigen viele Möglichkeiten auf. Ich würde so einen Music Hackday ja auch gern mal im Rhein-Main-Gebiet sehen ...

Jetzt aber genug der Worte. Klickt hier für 3D Music Maze! Viel Vergnügen beim Spielen und ein erfolgreiches neues Jahr 2012 :-)

Music Hack Day Berlin

Music Hack Day Logo

Während ich das Wochenende in Mannheim auf dem Future Music Camp 2011 verbringen werde, treffen sich eine Menge Entwickler, Designer und Musiker in Berlin zum Music Hack Day. In den Räumen von MTV Networks haben sie in kleinen Teams 24 Stunden Zeit, um coole, neuartige Musik-Apps oder -Webseiten zu programmieren.

Das Phänomen Music Hack Day ist ein globales, in San Francisco und Barcelona fanden bzw. finden ähnliche Veranstaltungen statt. Allein in San Francisco entstanden in kürzester Zeit 55 so genannten Hacks. Viele davon sind öffentlich im Netz zugänglich, einige sind dabei, sich weiterzuentwickeln. Vielleicht werden coole Open Source-Projekte draus oder kleine Startups. Manche sind Spielereien, aber fast alle sind verdammt cool.

Die Idee dahinter, die auch viele Sponsoren anzieht, ist, dass diese Anwendungen die Schnittstellen (APIs) vieler verschiedener Dienste anzapfen und etwas Neues aus den Daten entwickeln, die sie zurückbekommen. Beispiele? Ein Beatport-Plugin für Ableton Live, Soundrain: Ein Monetarisierungs-Widget für Soundcloud, eine last.fm-basierte Radio-App für Android. Ich bin äußerst gespannt, was die Hacker in Berlin entwickeln werden, und werde in den nächsten Wochen einige der Ergebnisse vorstellen.

Audiotools mit HTML5 und Audio Data API

Visualisierung, erzeug mit visualizer.fm

Wer jetzt schon eine Vorabversion von Firefox 4 oder eine aktuelle Entwicklerversion von Google Chrome bzw. Chromium installiert, kann sich mit täglich neue Demos vergnügen, welche neu eingebaute Technologien verwenden. So gibt es mittlerweile viele Browserspiele, die HTML5, CSS3 und insbesondere das Canvas-Element benutzen. Kommt dann noch Javascript dazu, sind die Möglichkeiten beinahe unbegrenzt. Zumindest wird klar, dass Anwendungen, die bisher nur mithilfe von Adobe Flash liefen, bald auch nativ im Browser laufen werden - ganz ohne Plugins.

Für uns Musikenthusiasten gibt es eine ganz besonders interessante Neuerung: Das Audio Data API! Grundsätzlich bietet HTML5 ja zwei neue Elemente für Multimedia-Inhalte an: <video> und <audio>. Deren Implementationen, vor allem die des <video>-Elements, unterscheiden sich momentan noch von Browser zu Browser, aber das ist ein anderes Thema. Mit dem Audio Data API stellt der Browser eine Schnittstelle nicht nur zum Abspielen von Musik, sondern auch zur Weiterverarbeitung von Musikdaten zur Verfügung.

So können vom Browser viele Metadaten eines Musikstücks, sprich Sample-Rate oder Anzahl der Kanäle, ausgelesen werden. Andererseits können aber auch Töne erzeugt und bearbeitet werden. Wer sich für die technischen Details interessiert, kann sich die vorläufige Spezifikation ansehen. Einige Entwickler bieten bereits Bibliotheken an, die die Programmierung von Audio-Anwendungen im Browser vereinfachen. Aber genug über die Technik geschrieben, im folgenden stelle ich einige interessante Demos vor.

"Audiotools mit HTML5 und Audio Data API" vollständig lesen
tweetbackcheck