Skip to content

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.

PatternSketch

Ein Sequencer bzw. eine Drum Machine mit vielen Patterns wie Jazz, Reggae, TR-808, TR-909 bis hin zum ominösen Com Truise Kit ist PatternSketch, das im Firefox 4 deutlich besser funktioniert als in Chromium. Mit bis zu 64 Steps, Tempoanpassung, Tastaturbedienung, Solo- und Mute-Modi sowie regelbarer Lautstärke für einzelne Spuren bietet die Anwendung schon jetzt zahlreiche Features. Die selbst gebastelten Beats lassen sich speichern, herunterladen oder zu Soundcloud exportieren.

Screenshot von PatternSketch

HTML5 Guitar Tab Player

Noch eher im Status eines proof-of-concept befindet sich dieser browserbasierte Player für Gitarren-Tabs. Wer sich, wie ich, in den 90ern regelmäßig im OLGA getummelt hat, kann sich vermutlich für dieses Tool begeistern. Leider klingt es nicht so besonders und fängt bei mir immer im zweiten Takt an, das Tempo zu verlieren. Aber das kann ja noch werden.

Screenshot HTML5 Guitar Tab Player

HTML5 Chip Tracker

Ebenfalls noch in der Entwicklung befindet sich der HTML5 Chip Tracker für alle, die früher auf dem Amiga oder dem Atari ST Chiptunes gebastelt haben. Wer einen Tracker zu bedienen weiß, wird sich auch im Browser schnell zurecht finden. Noch sind die Möglichkeiten begrenzt, aber mit Sicherheit werden bald noch mehr browserbasierte Tracker veröffentlicht werden. Für den hier vorgestellten Tracker ist ein Google-Account nötig.

Screenshot des HTML5 Chip Tracker

Demos, Demos, Demos

Viele weitere funktionierende Demo-Anwendungen sind auf dieser Seite gesammelt. Nicht alle sind so beeindruckend wie die hier gezeigten Programme. Aber man darf nicht vergessen, wie jung und zum Teil auch noch unfertig die zugrundeliegende Technologie ist. Sobald Firefox 4 in einer stabilen Version erscheint und andere Browser nachziehen, werden sich voraussichtlich immer mehr Programmierer auf die neuen Möglichkeiten stürzen, wie die Ergebnisse des Music Hack Day NYC 2011 eindrucksvoll belegen. Dann ist es vielleicht nur noch ein kurzer Weg bis zum Tonstudio im Browser.

  • Twitter
  • Facebook

Trackbacks

Keine Trackbacks

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

Pullipresidente am :

* PatternSketch werde ich mir mal ansehen, sobald ich die balls habe, mir den Firefox 4 zu installieren. Scheint jedenfalls genau die Mischung aus Simplizität und Umfang zu haben, die ich für meine unprofessionellen "casual sequencing"-Spielereien benötige. Merci vielmals!

Kommentar schreiben

HTML-Tags werden in ihre Entities umgewandelt.
Gravatar, Pavatar, Favatar, Twitter, Identica, Monster ID Autoren-Bilder werden unterstützt.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Wenn Du Deinen Twitter Namen eingibst wird Deine Timeline in Deinem Kommentar verlinkt.
Bewirb einen Deiner letzten Artikel
Dieses Blog erlaubt Dir mit Deinem Kommentar einen Deiner letzten Artikel zu bewerben. Bitte gib Deine Blog URL als Homepage ein, dann wird eine Auswahl erscheinen, in der Du einen Artikel auswählen kannst. (Javascript erforderlich)
Formular-Optionen
tweetbackcheck