Until recently, slideshows with audio required video or Flash. HTML5 is changing that. Below are some simple sound and lights, using the Codrops tutorial “Audio Slideshow with jPlayer”. It won’t work in some versions of Internet Explorer and Firefox, but soon Internet Explorer 10 will be outta beta and Firefox will play MP3s, then all major broswers (including mobile) can sync all manner of media. Here’s a preview of our Flash-less future:
→ Click the play button to start the audio slideshow (and display the pause button).
→ Click inside the progress bar (with the dots) under the photos to advance the sound and the slide and see the slide’s thumbnail.
Free of Flash
Gathering photos for a slideshow like this is easy: we used the Flickr Advanced Search, set to return only results with a Creative Commons license. For instance, you can do a search for “northern lights”, set to display medium-size thumbnails, with the “Showing Creative Commons-licensed content” filter on.
We embedded the above audio slideshow in an
iframe. You can too, by pasting this code at your site:
<iframe src="http://transom.org/wp-content/uploads/2012/05/northlites/tr_embed_sunsong.html" width="665" height="560" scrolling="no" frameborder="1"><a href="http://transom.org/wp-content/uploads/2012/05/northlites/tr_embed_sunsong.html" title="Audio and slides: HTML5">Audio slidehsow</a></a></iframe>
The slideshow uses the versatile jPlayer (same as in PRX’s new audio player). That provides the text minutes-seconds counter and the progress bar.
It takes advantage of the new HTML5 custom data attributes to declare the slide timings and thumbnail images. Here’s an example of a slide’s code, set to display 100 seconds from the start of the audio:
<img src="nasamarshall-2.jpg" alt="Clouds and Aurora Borealis (NASA International Space Station)" data-thumbnail="nasamarshall-2-small.jpg" data-slide-time="100" />
The specifics of using this audio slideshow are in the Codrops tutorial.
A Natural Radio
The “Natural Radio” sounds were recorded by Steve McGreevey of Auroral Chorus (aka, “Natural VLF Radio” and “Sounds of Space Weather” and “The Music of the Magnetosphere”). Steve makes devices that convert electromagnetic waves direct to sound waves, so you can hear lightning and solar storms striking earth’s magnetic fields — which also cause the visual Aurora at both poles, Southern and Northern Lights. Listening to Northern Lights is longer version of this radio story at PRX.