/ Audio

Web and Radio perfectly in sync

At the end of 2015 a couple of my colleagues at Munich's university radio station M94.5 and I wanted to create a summary of all the internet trends which took place in 2015. The issue was that a lot of internet trends contain web video, vines, memes and what not (The internet is pretty creative in that regard.). This can't just be done in a regular radio story. You have to see it.

<audio style="width : 100%;" controls="" id="audio" src="http://mediathek.m945.de/wp-content/uploads/2016/01/Hashtag-Rewind.mp3?_=1"><source type="audio/mpeg" src="http://mediathek.m945.de/wp-content/uploads/2016/01/Hashtag-Rewind.mp3?_=1"><a href="http://mediathek.m945.de/wp-content/uploads/2016/01/Hashtag-Rewind.mp3?_=1">http://mediathek.m945.de/wp-content/uploads/2016/01/Hashtag-Rewind.mp3?_=1</a></audio>


There's a great tool, called timelinejs out there. It allows you to create stunning interactive HTML5 timelines with only a google spreadsheet.

timeline spreadsheet

It was super cool experience we created with it (besides that it slowed down the browser noticeably) but something was missing. And I wondered why I never saw something like this before since it's pretty logical:

The timeline should sync automatically with the radio story.

To achieve that I used a framework by Mozilla called popcorn.js which makes it super easy to execute javascript on a certain point during any media playback (native audio players, custom styled ones and even embedded YouTube or Vimeo players are supported).

This was our to-do-list:

  • Produce the radio story
  • Fill the google spreadsheet with the events of the last months
  • Put the seconds a new topic comes up together with the according event headlines in a JSON file.
  • Call the timelineJS-API (Display of the event) on each popcorn.js (watches media element) event