Skip to content

Wheels Of Steel - Zwei 1210er im Browser

Screenshot der Wheels of Steel

Die Reihe der neuen, coolen und vor allem browserbasierten Musiktools reißt nicht ab. Neuester Vertreter: Wheels of Steel. Zwei 1210er Turntables, ein DJ-Mixer mit Crossfader - also ein klassisches DJ-Setup. Allerdings befindet sich dieses DJ-Pult in eurem Browser (sofern er modern genug ist, vermute ich; also FF4, Chrome, Safari). Nachdem Technics die Produktion der legendären Plattenspieler leider eingestellt hat, war ein digitaler, virtueller Nachbau eigentlich überfällig.

Was soll ich sagen: Die Sache funktioniert. Unten auf der Seite könnt ihr aus einer Liste von Tracks die Turntables befüllen - linke Maustaste für den linken, rechte Maustaste bzw. Shift-Klick für den rechten. Über ein Eingabefeld unterhalb der Plattenspieler könnt ihr sogar eigene URLs zu MP3-Stücken eingeben, die dann als virtuelles Vinyl auf dem Plattenteller landen. Wer sich für die Technik hinter der Seite interessiert, sollte sich den ausführlichen Blogbeitrag von Scott Schiller in Ruhe durchlesen. Dort beschreibt er seine Motivation und zeigt detailliert, wie er die Seite mit HTML5, CSS3 und Javascript umgesetzt hat.

Das Projekt ist Work in Progress und vielleicht mehr eine Spielerei, die beweisen soll, was mit aktuellen Mitteln im Browser alles geht. Aber die Liebe zum Detail, die Scott da hineingesteckt hat, ist beeindruckend! Die Start/Stop-Taste funktioniert ebenso wie die Umschaltung zwischen 33 und 45 RPM, das Ein- und Ausschalten, Scratchen und das Bewegen des Tonarms. Das Gleiche gilt für Crossfader und Gain-Regler, und wenn die Nadel in der Auslaufrille angekommen ist, knistert es! OMG!! [Danke, Gerrit]

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

iLike

Zugegeben, ich weiß gar nicht so genau, was sich hinter iLike verbirgt. Ist die Seite nur eine weitere Musikcommunity unter vielen, oder steckt mehr dahinter? Keine Ahnung, mir fehlen die Zeit und die Lust, alles anzusehen und auszuprobieren. Aber eine Sache hat mich dann doch interessiert, nämlich das API von iLike, welches das relativ einfache und intuitive Einbinden von Songs auf der eigenen Seite ermöglicht. Zwei kleine Javascript-Schnipsel genügen, und schon geht es los:

ilike

Klar, es gibt noch hundert andere Wege, ans Ziel zu gelangen, also Musik auf der eigenen Seite zu platzieren. Aber iLike macht es schon ziemlich einfach. Ganz leicht fühle ich mich an blip.fm erinnert, das Songtool für Twitter sozusagen. Das liegt an der Art und Weise wie nach Musik gesucht wird, und auch daran, dass die Musik aus nicht näher genannten Quellen zu stammen scheint. Damit sind die Gemeinsamkeiten aber wohl schon aufgezählt.

iLike erlaubt es auch, ganze Playlisten zu erstellen und zu veröffentlichen, blendet aber auch zu jedem Lied Werbung in Form von Links zu iTunes, Rhapsody oder Amazon ein. Gut, die wollen natürlich Geld verdienen - aber versuchen sie das mit Content aus der Grauzone? ich bin mir nicht sicher, weiß jemand Näheres darüber? Aber genug der Bedenken. Ich will lieber noch schnell zeigen, wie der Javascript-Code aussieht, den ich oben eingefügt habe.

<script src="http://www.ilike.com/api/js" type="text/javascript"></script><script type="text/javascript">iLikeDisplaySong({elId:"ilikesong1", songName:"Naima", artistName:"Coltrane"});</script>

Das war im Prinzip schon alles, zusätzlich wird allerdings noch ein kostenloser API-Schlüssel verlangt, den man aber recht einfach auf der iLike-Developer-Seite erhält. Natürlich war das auch nur ein sehr einfaches Beispiel, aber viel komplizierter wird es auch nicht mehr. Wessen Interesse ich nun geweckt habe, der kann sich ja bei iLike anmelden, sich im Developer-Wiki informieren - und mich als Freund hinzufügen :-) [via Paul Lamere übrigens]

Update: Hmm, da fehlt der Play-Button vor dem Song. Keine Ahnung, woran das liegt, vielleicht muss iLike erst intern etwas freischalten? Ich bleibe am Ball …

Updates, Updates, Updates

Endlich komme ich mal wieder zu einem Update hier im Blog. In den letzten Tagen gab es viel zu tun und deshalb hier keine neuen Einträge. Eine neue Radioshow (#003, mehr in Kürze) wollte produziert, das Barcamp in München besucht und viele andere Dinge geregelt werden. Da kann das Bloggen schnell zu kurz kommen. Aber was soll's, alles kann, nichts muss ;-)

Auch andere haben Updates veröffentlich, so schreibe ich diese Worte hier im Firefox 3.1beta (mit aktivierter Tracemonkey-Javascript-Engine), während im Hintergrund der neue Flash-Player 10 für Live-Musik von Calexico sorgt, wenn ich nicht gerade wieder auf einen neuen Track bei SoundCloud geklickt habe, das jetzt nicht mehr Beta sondern offen für alle ist. Das alles läuft bisher sehr stabil und, vor allem, subjektiv rasend schnell!

Screenshot des Audiotools in Action

Das wird gerade beim neuen Release des Hobnox Audiotools deutlich, das unter Linux und Flash 10 richtig Spaß macht. Dort lassen sich mittlerweile sogar die selbst kreierten Tracks recorden - das Tonstudio im Browser wird immer besser.

By the way: Geht eine/r der werten LeserInnen dieses Blogs morgen zu Calexico in die Muffathalle?

tweetbackcheck