Designere og udviklere skubber konvolutten med det, der er muligt i interaktiv design på et kontinuerligt grundlag. Og fantastiske nye eksempler kommer ud hele tiden.

Et af de nyeste eksempler er en interaktiv musikvideo for Evelyn , af ABBY.

Det er et fantastisk websted, der giver dig mulighed for at blande forskellige instrumenter og vokalstile sammen, mens sangen spiller, for en helt tilpasset oplevelse.

Vi spurgte udviklerne, hvordan de skabte en sådan fantastisk interaktiv video og fik deres tips til at arbejde på projekter af denne type.

1. Hvor kom ideen til videoen fra? Hvad var den kreative proces?

Selv om vi ikke var direkte involveret i den kreative proces, vil vi give dig en kort oversigt over, hvordan den blev oprettet.

Vi, Steffen & Dominik, har lige grundlagt et webudviklingsagentur i Berlin bleech der specialiserer sig i HTML5 og andre moderne webteknologier. Vi har vores kontor i et delt rum sammen med et optagestudie, der drives af medlemmerne af bandet ABBY . Rummet er udfyldt af et booking bureau og et iOS agentur.

De fleste af os har kendt hinanden siden college og vi har siden arbejdet sammen på mange forskellige projekter i mange forskellige og kreative miljøer.

Den egentlige idé til videoen blev udviklet af en ven af ​​os, der studerede design. Han havde brug for et emne for sin afhandling og havde visionen om at skabe en interaktiv oplevelse, som lader brugeren eksperimentere med de forskellige komponenter i en moderne sang.

2. Kan du give et hurtigt overblik over processen for faktisk at skabe videoen, de involverede trin mv?

En af de største udfordringer for bandet var at vælge de passende instrumenter, der afviger i deres lyd og egenskaber, men samtidig have en behagelig lyd og harmonisere med hinanden. Derudover måtte de sikre, at rytmerne og harmonikerne i de nyligt integrerede spor ikke på noget tidspunkt gik imod hinanden.

Vi mener, at de gjorde et rigtig godt stykke arbejde på dette.

Hele ideen blev udviklet uden at overholde tekniske krav til webteknologi. Så begyndte de at optage en video for hvert lydspor i et historisk lydstudio i Berlin. Dette resulterede i i alt 20 individuelle videoer, som derefter skulle slås sammen for at gøre ideen til virkelighed. Til denne opgave spurgte de en befriended Flash-udvikler for at lave et websted, hvor du kan styre de forskellige numre og blande din egen version af sangen. Desværre stod han for nogle problemer med synkroniseringsprocessen over en netværksforbindelse, så det tidlige udkast aldrig gjorde det til en endelig udgivelse.

Det var da vi kom ind. Vi følte os udfordret til at bevise, at det var muligt at bringe deres ide til liv med de nyeste teknologier, som ingen endnu har brugt på denne nøjagtige måde.

Vi begyndte at opbygge fundamentet i et testdrevet JavaScript-miljø for at sikre en sammenhængende kommunikation mellem videoerne, vores mediacontrollere og det globale tidslinjemodul. Mediekontrollerne tager sig af at skifte videoer og kun vise det aktuelt valgte spor. Tidslinjemodulet tjener som reference tid for hver mediecontroller og synkroniserer dem om nødvendigt.

3. Hvilke uventede udfordringer præsenterede sig under projektet? Hvilke råd ville du give en udvikler, der ønskede at oprette et projekt som dette?

En hård del i udviklingsprocessen var at holde videoerne synkroniseret uden at gøre for mange beregninger og for at sikre, at selv på ældre computere er en god, lydhør brugeroplevelse mulig.

De metoder, vi fandt ud af at være mest effektive, var en aggregering af flere algoritmer, som holder videoerne synkroniseret og tilpasset maskinens ydeevne ved at øge tærsklen og hyppigheden af, hvor ofte synkroniseringen udløses.

Den største udfordring var dog finjustering i millisekundsområdet, som for en sang med 120 slag pr. Minut, ville en forskydning på 50 ms af nogen af ​​sporene tydeligt blive bemærket af lytteren. Endelig lykkedes det os at få alle lyd- og videosporene synkroniseret med mindre end 10 ms. På højtydende computere (som en 2011 MacBook Pro / Air).

Hvis du planlægger at udvikle et mediedrevet HTML5-projekt, skal du være forberedt på søvnløse nætter, der optimerer små stykker kode, uforudsete browserbugs og en million mulige måder at implementere en enkelt funktion på.

4. Hvor ser du denne slags indhold på de næste par år?

Vi håber, at flere udviklere begynder at eksperimentere med medierelaterede webprojekter og håber at se nye rammer skabes til medierrige applikationer. Indtil dette tidspunkt har Java (behandling) og Flash stadig nogle fordele for visse brugssager.

De mest fremtrædende udviklinger i HTML5 er i øjeblikket lyd- og videofunktionerne, og vi ser frem til funktioner som mediacontroller eller enhedselementet, der implementeres i nye browsere.

Med moderne serverteknologier som websocket venter vi på at se levering af realtidsbegivenheder til brugeren i stedet for kun at betjene statisk, forudindstillet indhold. Derudover ville det være dejligt at se mere interaktivt indhold i stor skala, der integrerer social erfaring med eksisterende mediekanaler. De sædvanlige ting, som alle taler om lige nu ...

Vi er glade for at være en del af dette projekt og at samarbejde med gode kunstnere med forskellige ekspertise. Projektet er blevet vores lille baby, og vi er virkelig overvældet af det positive svar.

BTW, vi leder efter folk til at støtte vores voksende team.

Hvilke andre fantastiske HTML5-projekter har du set for nylig? Lad os vide i kommentarerne!