I’m quite happy to share today the work of the last few weeks on an early prototype of a visual radio demo made with the technical support of Étienne Després, Nathanaël Lécaudé and the wonderful Popcornjs and Hyperaudio communities. It was built with the content generously lended by Karine Poirier and the team from the geopolitical radio-show «La Guerre des mondes». (Content is in french, but you’ll get the gist of it!)
- You’ll find a large content-heavier version here : http://www.studioimaginaire.com/visualradio
- And a smaller player here : http://www.studioimaginaire.com/visualradio/small.html
I think the demo is fairly self-descriptive, nevertheless i’d like to share a few thoughts regarding the design guidelines I tried to set.
From early concepts I aimed for a strong visual representation of the content structure. In the end the proposition is quite simple: visual content is displayed in a huge vertical web page divided in logical sections which background are colored in relation to markers in the player’s timeline. The content can then either be surfed by skimming the audio (which makes the visual content scroll automatically) or by manually scrolling the visual content and clicking on section titles (which makes the player sync to the corresponding time in the audio).
Visual representation of content structure is something video and audio editors are used to, yet I don’t recall a web player having clear cues for it. As Henrik Moltke remarked “Only Soundcloud feels (somehow) like 2010″ with it’s waveform display and markers for comments. Yet waveforms don’t give explicit information on content structure (and even less so comment markers). I think it could be especially relevant for content heavy radio-shows.
Content exploration and narrative focus
I tried to make all of the content relevant either through passive or active exploration. For this I aimed to implement click or scroll triggers for every time based events. Most Popcornjs demos i’ve seen so far show and hide additional content on playhead events. This might be relevant for focused visual narratives, where additional content is seen either as part of or as a distraction from the main plot, but I think we could also build a “multiple-focus” experience, closer to the nature of the web.
I’m looking for feedback, comments and contributions. I understand that the prototype has very rough edges, but it is meant to spark discussions, hopefully ideas and some direct or indirect help to make it better. You’ll find the (very messy*) code and partial roadmap on github.