Adding Audio to Story Maps
2389
0
07-08-2016 12:00 AM
by
JosephKerski
I wrote an essay about creating a story map that made extensive use of audio files, the result of which was .... Since the essay was published, I have had inquiries about the specifics of how to encode the audio links in captions of photos in Story Map tours. This essay explains how to do this.
First, save your audio files. In my case, I had a long interview as one file, and used Camtasia to cut it into individual audio files. You could use Audacity or other audio or video editor to do the same thing. Then, move your audio files to a website. Story maps need to point to online content, not content that is stored on your local computer.
Then, edit the captions section for each of your stops on your map tour. These stops can be photographs or videos. Note that my "lake" stop is a video and the rest of the stops are photographs. The HTML code that I used for one of my captions was as follows:
<audio controls="">
<source type="audio/mpeg" src="http://josephkerski.com/storymaps/lakota-sound/lake.mp3"type="audio/mpeg"></source>does not support?</audio>On this and the following: <font color="#FFFF00">click Play </font>above to hear the sounds in English and in Lakota.
That's it! The beauty of HTML 5 is that my code above helps the browser know that an audio file will be played, and the browser knows how to configure an audio player without any extra coding on my part. Here is more information on how the HTML audio tag works.
This illustrates that (1) story maps are truly multimedia, and audio can be an effective part of these maps. Think of the audio you and your students could be using in their story maps, comparing the calls of different birds, the sounds of the ocean on different days in different weather conditions, narrations of all kinds, and much more; and (2) knowing just a bit of coding, as I did with HTML in this example, allows you to extend the capabilities of story maps and ArcGIS Online in simple but powerful ways.
--Joseph Kerski, Education Manager, Esri.
First, save your audio files. In my case, I had a long interview as one file, and used Camtasia to cut it into individual audio files. You could use Audacity or other audio or video editor to do the same thing. Then, move your audio files to a website. Story maps need to point to online content, not content that is stored on your local computer.
Then, edit the captions section for each of your stops on your map tour. These stops can be photographs or videos. Note that my "lake" stop is a video and the rest of the stops are photographs. The HTML code that I used for one of my captions was as follows:
<audio controls="">
<source type="audio/mpeg" src="http://josephkerski.com/storymaps/lakota-sound/lake.mp3"type="audio/mpeg"></source>does not support?</audio>On this and the following: <font color="#FFFF00">click Play </font>above to hear the sounds in English and in Lakota.
That's it! The beauty of HTML 5 is that my code above helps the browser know that an audio file will be played, and the browser knows how to configure an audio player without any extra coding on my part. Here is more information on how the HTML audio tag works.
This illustrates that (1) story maps are truly multimedia, and audio can be an effective part of these maps. Think of the audio you and your students could be using in their story maps, comparing the calls of different birds, the sounds of the ocean on different days in different weather conditions, narrations of all kinds, and much more; and (2) knowing just a bit of coding, as I did with HTML in this example, allows you to extend the capabilities of story maps and ArcGIS Online in simple but powerful ways.
Adding audio to captions in a story map.
--Joseph Kerski, Education Manager, Esri.