Designer und Entwickler gehen kontinuierlich an die Grenzen der Möglichkeiten des interaktiven Designs. Und es kommen ständig tolle neue Beispiele heraus. Eines der neuesten Beispiele ist ein interaktives Musikvideo für Evelyn, von ABBY. Es ist eine fantastische Seite, die Ihnen die Möglichkeit gibt, verschiedene Instrumente und Gesangsstile miteinander zu mischen, während der Song abgespielt wird, für ein völlig individuelles Erlebnis. Wir haben die Entwickler gefragt, wie sie ein so tolles interaktives Video erstellt haben, und haben ihre Tipps für die Arbeit an Projekten dieser Art erhalten.
1. Woher kam die Idee für das Video? Wie war der kreative Prozess?
Obwohl wir nicht direkt am kreativen Prozess beteiligt waren, geben wir Ihnen eine kurze Zusammenfassung darüber, wie er entstanden ist. Wir, Steffen & Dominik, haben gerade eine Webentwicklungsagentur in Berlin namens gegründet bleichen spezialisiert auf HTML5 und andere moderne Webtechnologien. Wir haben unser Büro in einem Gemeinschaftsraum zusammen mit einem Aufnahmestudio, das von den Bandmitgliedern betrieben wird ABBY. Komplettiert wird der Raum durch eine Booking-Agentur und eine iOS-Agentur. Die meisten von uns kennen sich seit dem College und haben seitdem an vielen verschiedenen Projekten in vielen unterschiedlichen und kreativen Umgebungen zusammengearbeitet. Die eigentliche Idee für das Video stammt von einem Freund von uns, der Design studiert hat. Er brauchte ein Thema für seine Abschlussarbeit und hatte die Vision, ein interaktives Erlebnis zu schaffen, das es dem Benutzer ermöglicht, mit den verschiedenen Komponenten eines modernen Songs zu experimentieren.
2. Können Sie einen kurzen Überblick über den Prozess zur tatsächlichen Erstellung des Videos, die erforderlichen Schritte usw. geben?
Eine der größten Herausforderungen für die Band bestand darin, die passenden Instrumente auszuwählen, die sich in ihrem Klang und ihren Eigenschaften unterscheiden, aber gleichzeitig einen angenehmen Klang haben und miteinander harmonieren. Darüber hinaus mussten sie sicherstellen, dass die Rhythmen und Harmonien der neu integrierten Tracks zu keinem Zeitpunkt im Widerspruch zueinander standen. Wir glauben, dass sie hier wirklich großartige Arbeit geleistet haben. Die gesamte Idee wurde entwickelt, ohne sich mit technischen Anforderungen an die Webtechnologie auseinanderzusetzen. Also begannen sie, für jede Audiospur ein Video in einem historischen Tonstudio in Berlin aufzunehmen. Dabei entstanden insgesamt 20 Einzelvideos, die dann zusammengefügt werden mussten, um die Idee Wirklichkeit werden zu lassen. Für diese Aufgabe haben sie einen befreundeten Flash-Entwickler gebeten, eine Website zu erstellen, auf der Sie die verschiedenen Tracks steuern und Ihre eigene Version des Songs mischen können. Leider hatte er einige Schwierigkeiten mit dem Synchronisierungsprozess über eine Netzwerkverbindung, sodass der frühe Entwurf nie in eine endgültige Veröffentlichung gelangte. Da kamen wir ins Spiel. Wir fühlten uns herausgefordert zu beweisen, dass es möglich ist, ihre Idee mit den neuesten Technologien zum Leben zu erwecken, die noch niemand auf diese Weise genutzt hat. Wir haben mit dem Aufbau der Grundlage in einer testgesteuerten JavaScript-Umgebung begonnen, um eine konsistente Kommunikation zwischen den Videos, unseren Mediencontrollern und dem globalen Timeline-Modul sicherzustellen. Die Mediacontroller kümmern sich darum, die Videos umzuschalten und nur den aktuell ausgewählten Titel anzuzeigen. Das Timeline-Modul dient als Referenzzeit für jeden Mediacontroller und synchronisiert diese bei Bedarf.
3. Welche unerwarteten Herausforderungen stellten sich während des Projekts? Welchen Rat würden Sie einem Entwickler geben, der ein solches Projekt erstellen möchte?
Ein schwieriger Teil des Entwicklungsprozesses bestand darin, die Videos ohne große Berechnungen synchron zu halten und sicherzustellen, dass auch auf älteren Computern ein gutes, reaktionsschnelles Benutzererlebnis möglich ist. Die Methoden, die sich unserer Meinung nach am effektivsten erwiesen, waren eine Kombination mehrerer Algorithmen, die die Videos synchron halten und sich an die Leistung der Maschine anpassen, indem sie den Schwellenwert und die Häufigkeit erhöhen, mit der die Synchronisierung ausgelöst wird. Die größte Herausforderung war jedoch die Feinabstimmung im Millisekundenbereich, da bei einem Song mit 120 Schlägen pro Minute ein Versatz von 50 ms zwischen den einzelnen Titeln für den Hörer deutlich wahrnehmbar wäre. Schließlich ist es uns gelungen, alle Audio- und Videospuren auf Hochleistungscomputern (wie einem 2011 MacBook Pro/Air) in weniger als 10 ms zu synchronisieren. Wenn Sie planen, ein mediengesteuertes HTML5-Projekt zu entwickeln, müssen Sie sich auf schlaflose Nächte bei der Optimierung kleiner Codeteile, unvorhergesehene Browserfehler und eine Million möglicher Möglichkeiten zur Implementierung einer einzelnen Funktion einstellen.
4. Wohin sehen Sie diese Art von Inhalten in den nächsten Jahren?
Wir hoffen, dass mehr Entwickler beginnen, mit medienbezogenen Webprojekten zu experimentieren, und hoffen, dass neue Frameworks für medienreiche Anwendungen erstellt werden. Bisher bieten Java (Verarbeitung) und Flash für bestimmte Anwendungsfälle noch einige Vorteile. Die derzeit herausragendsten Entwicklungen in HTML5 sind definitiv die Audio- und Videofunktionen und wir freuen uns darauf, dass Funktionen wie der Mediacontroller oder das Geräteelement in neuen Browsern implementiert werden. Mit modernen Servertechnologien wie Websocket warten wir darauf, dass dem Benutzer Echtzeitereignisse übermittelt werden, anstatt nur statische, vorab aufgezeichnete Inhalte bereitzustellen. Darüber hinaus wäre es großartig, mehr groß angelegte interaktive Inhalte zu sehen, die soziale Erfahrungen in bestehende Medienkanäle integrieren. Die üblichen Dinge, über die gerade alle reden … Wir freuen uns, Teil dieses Projekts zu sein und mit großartigen Künstlern mit unterschiedlichen Fachkenntnissen zusammenzuarbeiten. Das Projekt ist zu unserem kleinen Baby geworden und wir sind wirklich überwältigt von der positiven Resonanz. Übrigens sind wir auf der Suche nach Leuten, die unser wachsendes Team unterstützen.
Welche anderen tollen HTML5-Projekte haben Sie in letzter Zeit gesehen? Lass es uns in den Kommentaren wissen!
