Note: This blog covers the classic Esri Story Maps. Story authors are encouraged to use the new ArcGIS StoryMaps to create stories. However, Esri will continue to maintain the classic templates for your use. For more information, see the Product road map.
Story Map Tour is ideal when you want to present an ordered, place-based narrative featuring images or videos. Each “story point” in the tour has a location, and readers can click through sequentially, or explore by interacting with the map, or using an optional thumbnail carousel. Audio recordings can also be added to your Story Map tour, and used to enhance the storytelling experience.
This example from the City of Bellingham, Washington—Downtown Historic Walking Tour—uses audio to enrich the story with additional information about the buildings and other features along a walking route.
Note that many of the tour stops include an audio control which can be used to learn more about the location:
Here is another Story Map Tour that includes audio—Historic Roseville Walking Tour.
Add an audio file
In this example we’ll add an audio file to an existing tour, and specifically to an existing tour stop.
Step 1 – Open your Map Tour in builder mode
After opening the tour click Edit in the upper right of the application. Note that this is available only if you are the map tour owner.
Step 2 – Add the audio file to the desired tour stop
A good place to add an audio control is to the tour stop caption so it appears below the text as seen in the example tours above. Advance to the desired tour stop, and click to edit the picture caption. Depending on which layout you have chosen, the caption editing panel may appear slightly different, but adding audio works the same way no matter which layout you have chosen.
Step 3 – Add the markup necessary to add the audio file
Store the audio file at a publicly accessible URL location. The sample we will use is an MP3 file stored on our server.
The markup used to display the audio control is as follows:
<source src="http://downloads.esri.com/agol/labs/maptour/horse.mp3" type="audio/mpeg">
Add a couple of line breaks to ensure separation if you like. The edited caption appears below with the HTML shown above inserted into the caption:
Step 4 – Save your Map Tour and view/listen
Save your work, the tour stop caption has now been enhanced to include the audio control.
Audio is best when used sparingly. Like adding spice to food, too much can ruin your efforts, but a pinch here and there can bring out the story’s flavor. Keep your audio clips short and to the point. Note that audio files may not play in all versions of browsers or on all devices. To learn more about embedding sounds, see the w3schools.com website we referenced for this example.
Using the audio tag to embed audio clips in Map Tour captions as described in this blog is not supported when uploading local images directly into the Map Tour Builder.