Capability

October 2018

Add Audio to Your Esri Story Map Tour App

By Bern Szukalski

article image

When you want to present a sequential, place-based narrative that features images or videos, the Esri Story Map Tour app is an excellent choice. Viewers can click through each tour point in sequence or explore the tour by using the map or optional thumbnail carousel. You also can add audio recordings to your Story Map Tour app to enhance the storytelling experience, which you will learn how to do in the tip below.

The City of Bellingham, Washington, created the Downtown Historic Walking Tour. It uses audio to enrich the story with information about the buildings and other features along a walking route.

Note that many of the tour stops include an audio control. Click it to learn more about the location:

Another Story Map Tour app that includes audio is the Historic Roseville Walking Tour, created by the City of Roseville, California.

To add an audio file to your own Story Map Tour app, follow the steps below. In this example, you will learn how to add an audio file to a stop in one of your existing tours. To learn how to create a tour, visit the Story Map Tour web page and click BUILD A MAP TOUR. You will need an ArcGIS Online organizational account or an ArcGIS public account.

Step 1. Open your map tour in builder mode.

Click Edit in the upper right-hand side of the application. Note that this functionality 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 the tour stop caption so that it appears below the text, as seen in the example tours above. Advance to the desired tour stop, then click to edit the picture caption. The appearance of the caption editing panel will depend on which layout you have selected, 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 used here is an MP3 file stored on a server.

Add a couple of line breaks (<br>) to ensure that there is adequate space between the caption text and the audio control. The edited caption appears in the image below, with the HTML shown above inserted into the caption area:

Step 4. Save your map tour, then view and listen to it.

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

Remember that audio is best when used sparingly. Like spice added 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 website referenced for this example.

Visit the Story Maps web page for more information, or view the help provided within the Story Map Tour builder. The Story Maps Gallery contains other examples of story maps that use audio.

Share this article