I’m proud to announce the Radiolab Hyper Audio Player. Go check it out! Comments, bugs, fixes and random ideas are most welcome in the comments, or here.
The Radiolab Hyper Audio Player v1, brought to you by WNYC Radiolab, SoundCloud and Mozilla Drumbeat
What is it?
In brief, this experimental HTML5-player is a the happy marriage of
1: Radiolab, IMO the best radio show in the world. Radiolab let us experiment with “Desperately Seeking Symmetry“, a show which was particularly suited for an audio-visual experience, and for building a custom HTML5 player using:
2: Popcorn.js, a Mozilla-backed JavaScript framework for integrating the web into audio and video productions.
3: SoundCloud, an innovative and successful music sharing platform, known for its characteristic waveform player and commenting functionality.
What does it do?
First of all: the player is a fully open experience – that means no flash, no proprietary codecs; only pristine HTML5, CSS and JavaScript. The demo works beautifully (well, mostly) both on a Linux computer and on the iPad. So, what does it do?
It displays images and comments from SoundCloud player
When Radiolab puts a link to an image in a Soundcloud comment, Popcorn.js makes it display in the main window. These comments are visible on SoundCloud, but not in the player. Other comments made by Radiolab are. This allows for Radiolab to experiment with listener engagement in new ways. This was one of the main points that came out of my meetings with Radiolab – displaying additional information (links to research etc that did not make it into the final cut, for example) was not an attractive feature as exploring and filtering the creativity and ideas coming from listeners. In this demo, Creative Commons licensed images from listener who attended the shows appear. In future versions, we’d like to integrate YouTube and other videos.
The hyperlinked transcript is used to visualize the audio, helps navigate the audio (and facilitates search).
The hyperlinked transcript feature was explored in our first demo, Hyperdisken. In this demo we used it in two ways:
- If you click the transcript button in the right side, you get a transcript. Clicking any word in the transcript (done by 3Play) sends you to that point in the timeline / player. The transcript scrolls and always shows you where in the text the show is currently.
- the “word river” (by Paul Rouget) visualizes the transcript when there are no images shown. It doesn’t serve any function other than an aesthetic one, and only works in newer versions of Firefox and Chrome because it uses new CSS3 and was never intended to work on older browsers. Our feeling is that the experience degrades gracefully when on an older browser – and hey, it’s about time to upgrade anyway. (Get Firefox 4, or Chrome!)
In conclusion
I look forward to getting more feedback from WNYC / Radiolab and their listeners. We have taken a first, pioneering step into building a player that does something new with Radio, but this is only the beginning. Leading this project was a challenge for everyone involved. For me, it meant hearding and pushing (not always successfully) a bunch of very talented cats with no time to spare, and get an advanced, working prototype built in little more than a week. Mark Boas and his Happy Worm team deserve wild praise for throwing everything in their hands down and maintaining focus and architectural overview during a rather chaotic week. Mark will post his account of hos the demo was built, with documentation and source code on GitHub shortly. Popcorn developer Steven Weerdenburg did an excellent job on the Popcorn plugin for Soundcloud, with Support from his team. I owe huge thanks to Ben, Henrik, Johan and Johannes from SoundCloud,, and not least Music & Tech Ninja Lee Martin for taking time out to provide an awesome design. Thanks Paul Rouget for helping and being absolutely brilliant. Finally, I am proud to work with the Radiolab team and look forward to taking this further.
![[FSF Proud Member]](http://yoyodyne.cc/wp-content/uploads/2010/08/henrikfsfbutton.png){kind=small}
[...] Popcorn.js, Soundcloud, Radiolab, combined with Henrik, Mark and many others has produced a great Radiolab Player demo. For my own part in the process, working with everyone has been [...]
Very, very nice! Great use of HTML5/CSS3, etc.
This is awesome. Congrats. So many talented people in this world, it leaves me in awe. I wish I had an ounce of this sort of talent. I can’t wait to experience this, and Radiolab is the best. Hands down.
Hi,
Interesting concept, but it sorry it doesn’t work for me. The big advantage of radio is that you can listen whilst doing something else and not looking at a screen.
Also I can engage more when it is purely radio, for example when Jad asks Robert the question about enjoying looking in the mirror. When I first listened only to the podcast I found myself considering the question myself, but with the image in front of me I found myself considering Robert’s face!
In a very short time I found I was sitting in front my monitor with my eyes closed!
Another way that I engage with radio programmes is by conjuring up my own imagery, other images, unless very well done, tend to detract from the experience.
I love radio and I love the internet, each has it’s own strengths. If one is to combine both then there should be some sort of synergy. In this experiment I feel that the sum of the two parts doesn’t quite add up.
I appreciate that this isn’t a positive reply but I hope that it is helpful.
Regards
Mike
This is excellent – you could use it as-is for some time w/o revision.
Eventually, we want more user-interaction, so we can flip photos or manipulate widgets, as we listen.
Remember Robert Winter, who almost twenty years ago created the most wonderful hypercard stacks illustrating and explicating pieces by Beethoven, Mozart, Dvorak?
Published by Vanguard (now owned by the Criterion Collection) – unplayable after the 68000 Macs disappeared (along w/OS 7).
http://www.musicology.ucla.edu/index.php?option=com_content&view=article&id=183:robert-winter-bio&catid=6&Itemid=225
cooooool!!!! this could replace a whole lot of video on the web.
maybe an optional notification sound would be cool to signal “look at the screen an illustrative/important picture” everytime a picture pops up. then you can wash the dishes and only look on the radio when the “hyper-stuff” is relevant…
cheers,
eske
[...] we have been involved in an interesting experiment: The Radiolab Hyper Audio Player! Take a look at Henrik Moltke blog post on the project for more [...]
[...] platform with a JavaScript framework for integrating the web into audio productions. Check out a demo of the player with the popular Radiolab show and learn more about how it was made and how you can try it out [...]
[...] has already blogged about the ideas and functionality that make up the demo. I want to write a little about the technology [...]
[...] LINKS: Harddisken som Hyperaudio Radiolab som Hyperaudio Læs mere om teknologierne bag på Henrik Moltkes blog [...]
[...] Mere om Hyperaudio på Henrik Moltkes blog [...]
This is brilliant and I can see many uses for it especially to get additional information across with the links.
Also by scanning the text we can click to the section that we want to listen to. A much faster way to get to the content that you want to listen to rather than scrolling through the audio.
I’m looking forward to seeing where PopcornJS goes.
Why Do you think a radiolistener is watching their mobile screen whole time?
The reason you listen to radio is that you want to Do other things. Or you could watch TV.
Hi…I would love to see the demo at http://hyper-audio.org/r/ but the URL goes to a GODADDY url.
Is there a functioning demo somewhere else?
Big thanks,
Randy
Working on it.. Pulled the plug on Godaddy a bit too soon