En fantastisk HTML5-interaktiv musikkvideo
Designere og utviklere skyver konvolutten med det som er mulig i interaktiv design på en kontinuerlig basis. Og fantastiske nye eksempler kommer ut hele tiden.
Et av de nyeste eksemplene er en interaktiv musikkvideo for Evelyn , av ABBY.
Det er et fantastisk nettsted som gir deg muligheten til å blande ulike instrumenter og vokalstiler sammen, mens sangen spiller, for en helt tilpasset opplevelse.
Vi spurte utviklerne hvordan de opprettet en slik fantastisk interaktiv video, og fikk tips for å jobbe med prosjekter av denne typen.
1. Hvor kom ideen for videoen fra? Hva var den kreative prosessen?
Selv om vi ikke var direkte involvert i den kreative prosessen, vil vi gi deg en kort oppsummering av hvordan den ble opprettet.
Vi, Steffen & Dominik, nettopp grunnlagt et webutviklingsbyrå i Berlin bleech som spesialiserer seg på HTML5 og andre moderne webteknologier. Vi har vårt kontor i en delt rom sammen med et innspillingsstudio som drives av bandets medlemmer ABBY . Plassen er fullført av et reisebyrå og et iOS-byrå.
De fleste av oss har kjent hverandre siden college og vi har siden arbeidet sammen på mange forskjellige prosjekter i mange ulike og kreative miljøer.
Den faktiske ideen til videoen ble utviklet av en venn av oss som studerte design. Han trengte et emne for sin avhandling og hadde visjonen om å skape en interaktiv opplevelse som lar brukeren eksperimentere med de forskjellige komponentene i en moderne sang.
2. Kan du gi en rask oversikt over prosessen for å faktisk lage videoen, trinnene som er involvert, etc.?
En av de største utfordringene for bandet var å velge de tilstrekkelige instrumentene som varierer i lyd og egenskaper, men samtidig ha en hyggelig lyd og harmonisere med hverandre. I tillegg måtte de sørge for at rytmene og harmoniene i de nylig integrerte sporene ikke til enhver tid gikk imot hverandre.
Vi tror de gjorde en veldig god jobb på dette.
Hele ideen ble utviklet uten å håndtere tekniske krav til webteknologi. Så begynte de å spille inn en video for hvert lydspor i et historisk lydstudio i Berlin. Dette resulterte i totalt 20 individuelle videoer, som da måtte slås sammen for å gjøre ideen til virkelighet. For denne oppgaven spurte de en venn med Flash-utvikler for å lage et nettsted der du kan styre de forskjellige sporene og blande din egen versjon av sangen. Dessverre møtte han noen problemer med synkroniseringsprosessen over en nettverksforbindelse, slik at tidlig utkast aldri gjorde det til en endelig utgave.
Det var da vi kom inn. Vi følte oss utfordret til å bevise at det var mulig å bringe ideen til liv med den nyeste teknologien som ingen har brukt på denne nøyaktige måten.
Vi begynte å bygge fundamentet i et testdrevet JavaScript-miljø for å sikre konsekvent kommunikasjon mellom videoene, våre mediacontrollers og den globale tidslinjemodulen. Mediekontrollerne tar seg av å bytte videoene og vise bare det valgte sporet. Tidslinjemodulen tjener som referansetid for hver mediacontroller og synkroniserer dem om nødvendig.
3. Hvilke uventede utfordringer presenterte seg under prosjektet? Hvilke råd vil du gi en utvikler som ønsket å lage et prosjekt som dette?
En tøff del i utviklingsprosessen var å holde videoene synkronisert uten å gjøre for mange beregninger og for å sikre at selv på eldre datamaskiner er det mulig å ha en god og responsiv brukeropplevelse.
Metodene vi fant ut til å være mest effektive var en aggregering av flere algoritmer som holder videoene synkronisert og tilpasset maskinens ytelse ved å øke terskelen og hyppigheten av hvor ofte synkroniseringen utløses.
Den største utfordringen var imidlertid finjustering i millisekundsområdet, som for en sang med 120 slag per minutt, ville en offset på 50 ms av noen av sporene tydelig bli lagt merke til av lytteren. Endelig klarte vi å få alle lyd- og videosporene synkronisert med mindre enn 10 ms på høypresterende datamaskiner (som en 2011 MacBook Pro / Air).
Hvis du planlegger å utvikle et media-drevet HTML5-prosjekt, vær forberedt på søvnløse netter, optimalisere små kodenheter, uforutsette nettleserveil og en million mulige måter å implementere en enkelt funksjon på.
4. Hvor ser du denne typen innhold på de neste årene?
Vi håper at flere utviklere begynner å eksperimentere med medierelaterte webprosjekter, og håper å se nye rammer utviklet for mediarike applikasjoner. Inntil videre har Java (behandling) og Flash fortsatt noen fordeler for visse brukstilfeller.
De mest fremtredende utviklingene i HTML5 for øyeblikket er definitivt lyd- og videofunksjonene, og vi gleder oss til funksjoner som mediacontroller eller enhetselementet som implementeres i nye nettlesere.
Med moderne serverteknologi som websocket venter vi på å se levering av sanntidshendelser til brukeren i stedet for bare å betjene statisk, forhåndsinnspilt innhold. I tillegg vil det være flott å se mer storskala interaktivt innhold som integrerer sosial erfaring med eksisterende mediekanaler. De vanlige tingene som alle snakker om akkurat nå ...
Vi er glade for å være en del av dette prosjektet og å jobbe med flotte kunstnere med ulike ekspertise. Prosjektet er blitt vår lille baby og vi er virkelig overveldet av det positive svaret.
BTW, vi leter etter folk som støtter vårt voksende team.
Hvilke andre flotte HTML5-prosjekter har du sett nylig? Gi oss beskjed i kommentarene!