Adding audio to your story map map tours

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.

Play audio file

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

<audio controls>
<source src=""
type="audio/mpeg"> <embed height="50" width="100"

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.


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 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.

This entry was posted in ArcGIS Online, Story Maps and tagged , , , . Bookmark the permalink.

Leave a Reply


  1. newell.kate says:

    Hi, I have embedded audio as described above and works great when I view the storymap on my desktop…however on my iphone I repeatedly get “Cannot play audio file” message. Any ideas?

  2. sclafanr says:

    Should this work with .m4a files as well? I am trying to use this code to embed audio in that format and it doesn’t seem to be working.