t3n News Entwicklung

Komplexe Audio-Visualisierung mittels HTML5

Komplexe Audio-Visualisierung mittels HTML5

hat Entwickler dazu aufgefordert, verschiedenste Experimente, die auf fortschrittlichen Web-Technologien beruhen, einzureichen. Ein Beitrag sticht besonders hervor. Es handelt sich um eine komplexe und umfangreiche Lösung zur Visualisierung von Audiosignalen.

Komplexe Audio-Visualisierung mittels HTML5

Im Jahr 2009 startete Google die Webseite ChromeExperiments.com um dort eine Anlaufstelle für interessante und beeindruckende Einsatzgebiete moderner Webtechnologien zu schaffen. Was als kleiner Test mit 19 Beispielen startete, ist inzwischen eine Datenbank mit über 500 faszinierenden Experimenten geworden. Für besonderes Aufsehen sorgt einer der neusten Einträge mit dem Namen „A Dive in Music“.

Audio-Visualisierung auf höchstem Niveau

Hinter diesem Namen verbirgt sich ein Experiment des Franzosen Damien Benoit. Dieser hat mithilfe von in Form von WebGL, der „Web Audio API“ und der „Audio Data API“ eine Anwendung zur Visualisierung von Audiodateien geschrieben. Dabei können sowohl eigene, lokale Musikdateien als auch vorhandene Beispielmusik verwendet werden.

Die Audio-Visualisierung „A Dive in Music“ erlaubt es, dutzende Parameter zu verändern.

Etliche Parameter und Einstellungsmöglichkeiten

Richtig interessant wird das Experiment erst, wenn man die Vielzahl an Parametern und Einstellungen betrachtet, die sich am rechten Bildschirmrand ändern lassen. Angefangen bei der Auswahl verschiedener Verstärker, über die Kameraposition bis hin zur farblichen Gestaltung der Visualisierungen lässt sich nahezu alles an den eigenen Geschmack anpassen. Zum Glück kann eine eigene Konfiguration auch als Preset gespeichert werden. Außerdem gibt es natürlich jede Menge vorgefertigte Presets zu Bestaunen.

Weiterführende Links:

Hänge dich jetzt an unsere Facebook-Seite und sichere dir deinen #Wissensvorsprung!
t3n gefällt mir!
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von UFO-Hacker am 17.10.2012 (12:07 Uhr)

    leider Geil!

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Google
Cheat-Sheet für HTML5-Entwickler: Von wichtigen Tags bis zur Browser-Unterstützung
Cheat-Sheet für HTML5-Entwickler: Von wichtigen Tags bis zur Browser-Unterstützung

Cheat-Sheet für HTML5-Entwickler? Haben wir natürlich für euch! Der kleine Spickzettel liefert Infos zu wichtigen Tags, Canvas, Event-Attributen und Browser-Unterstützungen. » weiterlesen

Google enthüllt Material Design Lite
Google enthüllt Material Design Lite

Google hat Material Design Lite vorgestellt. Damit bringt der Konzern die Designsprache mit CSS, JavaScript und HTML ins Web. » weiterlesen

App-Tipps von Franziska Bluhm: Das darf auf ihrem Homescreen nicht fehlen
App-Tipps von Franziska Bluhm: Das darf auf ihrem Homescreen nicht fehlen

In unserer wöchentlichen Serie zeigen bekannte Gesichter aus der Internetwelt euch den Startbildschirm ihres Smartphones. Im Folgenden erfahrt ihr, welche iPhone-Apps die Journalistin Franziska … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?

t3n 40 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen