Adding audio to your Map Tour

By Bern Szukalski, Esri

In previous posts we’ve covered adding websites, videos, and even CityEngine web scenes to story map map tours. In this post we’ll outline how you can add audio to enhance the storytelling experience for viewers of your tours.

This example from the City of Roseville, California, uses audio to enrich the story about historic 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’s another example, in this case a custom story map that incorporates audio to tell a story about vanishing languages.

Though the second example is a custom application, both use the same HTML tag described below to add audio.

In this example we’ll add an audio file to an existing tour, and specifically to an exiting tour stop.

Step 1: Open your map tour in builder mode

After opening the tour click Switch to builder mode found in the upper right of the application. Note that this is available only if you are the map tour owner:

Step 2: Add audio to the desired tour stop

A good place to add an audio control is to the stop caption so it appears below the text as seen in the Roseville, California, tour. Advance to the desired tour stop and click to edit the picture caption:

Step 3: Add the HTML needed to display the audio control

Store the audio file at a publicly accessible URL location. The sample we will use is an MP3 file stored on our server.

http://downloads.esri.com/agol/labs/maptour/horse.mp3

Play audio file

The HTML to be added to the tour caption is as follows:

<audio controls>
  <source src="http://downloads.esri.com/agol/labs/maptour/horse.mp3" type="audio/mpeg">
  <embed height="50" width="100" src="http://downloads.esri.com/agol/labs/maptour/horse.mp3">
</audio>

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 the tour and view/listen

Save your work, the tour stop caption has now been enhanced to include the audio control.

Tips

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.

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.

For more information

For more information see the Storytelling with Maps website, or view the help provided within the map tour builder.

Originally published at blogs.esri.com on February 20, 2014.