En fantastisk HTML5-interaktiv musikvideo
Designers och utvecklare trycker på kuvertet med det som är möjligt i interaktiv design på en kontinuerlig basis. Och fantastiska nya exempel kommer ut hela tiden.
Ett av de nyaste exemplen är en interaktiv musikvideo för Evelyn , av ABBY.
Det är en fantastisk webbplats som ger dig möjlighet att blanda olika instrument och vokalstilar tillsammans, medan låten spelar, för en helt anpassad upplevelse.
Vi bad utvecklarna hur de skapade en så fantastisk interaktiv video och fick sina tips för att arbeta med projekt av den här typen.
1. Var kom tanken på videon från? Vad var den kreativa processen?
Även om vi inte var direkt involverade i den kreativa processen kommer vi att ge dig en kort sammanfattning av hur den skapades.
Vi, Steffen & Dominik, grundade just en webbutvecklingsbyrå i Berlin bleech specialiserat på HTML5 och annan modern webbteknologi. Vi har vårt kontor i ett gemensamt utrymme tillsammans med en inspelningsstudio som drivs av medlemmarna av bandet ABBY . Utrymmet fylls i av en bokningsbyrå och en iOS-byrå.
De flesta av oss har känt varandra sedan college och vi har sedan dess arbetat tillsammans på många olika projekt i många olika och kreativa miljöer.
Den faktiska idén för videon utvecklades av en vän av oss som studerade design. Han behövde ett ämne för hans avhandling och hade visionen att skapa en interaktiv upplevelse som låter användaren experimentera med de olika komponenterna i en modern sång.
2. Kan du ge en snabb överblick över processen för att faktiskt skapa videon, de aktuella stegen etc.?
En av de största utmaningarna för bandet var att välja de adekvata instrumenten som skiljer sig åt i deras ljud och egenskaper men samtidigt har ett trevligt ljud och harmoniserar med varandra. Dessutom måste de se till att rytmerna och övertonerna i de nyintegrerade spåren inte vid något tillfälle gick emot varandra.
Vi tror att de gjorde ett riktigt bra jobb på detta.
Hela idén utvecklades utan att hantera några tekniska krav avseende webbteknik. Så började de spela in en video för varje ljudspår i en historisk ljudstudio i Berlin. Detta resulterade i totalt 20 enskilda videor, som sedan måste slås samman för att göra idén till verklighet. För den här uppgiften frågade de en befriended Flash-utvecklare för att skapa en webbplats där du kan styra de olika spåren och mixa din egen version av låten. Tyvärr har han haft problem med synkroniseringsprocessen över en nätverksanslutning, så att tidigt utkast aldrig gjorde det till en slutgiltig utgåva.
Det var när vi kom in. Vi kände oss utmanade att bevisa att det var möjligt att föra deras idé till liv med den senaste tekniken som ingen ännu har använt på detta exakta sätt.
Vi började bygga grunden i en testdriven JavaScript-miljö för att säkerställa en konsekvent kommunikation mellan videon, våra mediacontrollers och den globala tidslinjemodulen. Mediekontrollerna tar hand om att byta videoklipp och endast visar det aktuella valda spåret. Tidslinjemodulen fungerar som referenstid för varje mediacontroller och synkroniserar dem om det behövs.
3. Vilka oväntade utmaningar presenterade sig under projektet? Vilka råd skulle du ge en utvecklare som ville skapa ett sådant projekt?
En tuff del i utvecklingsprocessen var att hålla videon i synk utan att göra för många beräkningar och för att se till att även på äldre datorer kan en bra, lyhörd användarupplevelse vara möjlig.
De metoder som vi upptäckte var mest effektiva var en aggregering av flera algoritmer som håller videon i synkronisering och anpassar sig till maskinens prestanda genom att öka tröskeln och frekvensen för hur ofta synkroniseringen utlöses.
Den största utmaningen var dock finjustering i millisekunderområdet, som för en låt med 120 slag per minut, skulle en uppräkning av 50 ms av någon av spåren tydligt noteras av lyssnaren. Slutligen lyckades vi få alla ljud- och videospåren synkroniserade med mindre än 10ms på högpresterande datorer (som en 2011 MacBook Pro / Air).
Om du planerar att utveckla ett media-driven HTML5-projekt, var förberedd för sömnlösa nätter som optimerar små bitar av kod, oförutsedda webbläsarfel och en miljon möjliga sätt att implementera en enda funktion.
4. Var ser du denna typ av innehåll på de närmaste åren?
Vi hoppas att fler utvecklare börjar experimentera med mediarelaterade webbprojekt och hoppas att nya ramar skapas för mediarika applikationer. Fram till detta har Java (bearbetning) och Flash fortfarande vissa fördelar för vissa användningsfall.
De mest framträdande utvecklingen i HTML5 är för närvarande ljud- och videofunktionerna och vi ser fram emot funktioner som mediacontroller eller enhetselement som implementeras i nya webbläsare.
Med modern serverteknologi som websocket väntar vi på att se leverans av realtidshändelser till användaren istället för att bara servera statiskt, förinspelat innehåll. Dessutom skulle det vara bra att se mer storskaligt interaktivt innehåll som integrerar social erfarenhet med befintliga mediekanaler. De vanliga sakerna som alla pratar om just nu ...
Vi är glada att vara med i detta projekt och att jobba med bra artister med olika kunskaper. Projektet har blivit vår lilla bebis och vi är verkligen överväldigade av det positiva svaret.
BTW, vi letar efter människor som stöder vårt växande lag.
Vilka andra häftiga HTML5-projekt har du sett nyligen? Låt oss veta i kommentarerna!