nlites-visitfinland-3-square

Slides Get Sound

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:

How To

→ 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

The above uses standard HTML and JavaScript to sync audio, slides, and controls. That was once possible only with a plugin, such as Flash or Silverlight. And unlike the plugins, the HTML should work on most mobile devices.

CC Slides

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.

Embed

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>

jPlayer

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.

Photos (cc) by:

Ann Powell Groner

Northern Lights, Kattovuoma, Sweden Northern Lights, Kattovuoma, Sweden

Gunnar Hildonen

Northern Lights, Tromso, Norway Northern Lights, Tromso, Norway Northern Lights, Tromso, Norway Northern Lights, Tromso, Norway

Visit Finland

Northern lights in Finnish Lapland Northern lights in Finnish Winter, Sodankyla, Lapland, Finland Northern lights in Finnish Lapland, Sodankyla, Lapland, Finland Aurora Borealis in Sodankyla, Finland Magical Northern Lights, Aurora Borealis in Finnish Lapland. Magical Northern lights, Sodankyla, Lapland, Finland Colourful Aurora Borealis, Sodankyla, Lapland, Finland

Timo Newton-Syms

Northern Lights, Ruka, Oulu Province, Finland Northern Lights, Ruka, Oulu Province, Finland Northern Lights, Ruka, Oulu Province, Finland Northern Lights, Aikkila, Oulu Province, Finland Northern Lights, Ruka, Oulu Province, Finland Northern Lights and The Moon, Aikkila, Oulu Province, Finland

NASA’s Marshall Space Flight Center (taken from the International Space Station)

Moscow at Night (NASA, International Space Station, 03/28/12) Clouds and Aurora Borealis (NASA, International Space Station, 02/06/12) A 'Green Sea' of Aurora Borealis (NASA, International Space Station, 01/25/12) Aurora Borealis Over Canada (NASA, International Space Station, 01/25/12) Aurora Australis (NASA, International Space Station Science, 05/29/10)

Tor Even Mathisen

Aurora Borealis over Tromsø, Norway 10.03.2011 Aurora and moonlight, Sandvik, Troms Fylke, Norway Aurora, Troms Fylke, Norway Nordlys over Berg i Tromso, Norway Aurora Borealis, 24.01.2012, over Grotfjorden, Norway Aurora Borealis, 24.01.2012, over Grotfjorden, Norway