Visual radio prototype

Posted by on Aug 23, 2011 in VisualRadio | 2 Comments

Visual timeline screenshot


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ésNathanaë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 :
- And a smaller player here :

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.

Visual timelines
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.

Next steps
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.

*In that regard I want to underline the contribution of Étienne Després who jumped early in the project when I had much needed help with javascript. He is still actively trying to transform messy scripts and un-automated features into decent pieces of code.



  1. Florent_MICHEL
    %B %e%q, %Y

    Beau travail, ça donne envie d’avoir ce type de fonctionnalité liés aux futures radios numérique terrestre. Retour utilisateur sur ta démo, je trouve que lorceque l’on saute du premier “chapitre” au “chapitre” 5, il est domage d’avoir un affichage qui passe sur les chap 2 3 et 4 en marquant une courte pause.

  2. sroux
    %B %e%q, %Y

    Merci pour les commentaires Florent. En effet, le glissement de la tête de lecture n’offre pas encore une expérience intéressante, pour l’instant c’est beaucoup plus intéressant de cliquer sur la ligne de temps, ce qui provoque un défilement sans accrocs.  L’équivalent devrait être obtenu à terme avec le déplacement de la tête de lecture.

Leave a Reply