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.


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.

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

Leave a Reply

9 Comments

  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.

  3. mw1211 says:

    I am having some problems adding audio to my walking map tour. The audio successfully embeds once I’ve put in the correct html code (as shown in this post), however I keep encountering the following message when trying to save: “Save failed due to an invalid html tag in a name or description”. Can anyone help? Thanks in advance!

    • Bern Szukalski says:

      I just double-checked the example in the post using the latest version of Chrome and IE, and there are no issues. I was able to save the story map, and play the audio in the saved story. More information will be needed – what browser and version, plus link to audio file you are trying to use.

      • mw1211 says:

        Hi Bern,
        Thanks for your prompt reply. I am using Chrome 51 on Windows 7 Pro, and copy-pasted the HTML example provided in the blog:

        Please let me know if you require any more specifications.Thank you!

        • Bern Szukalski says:

          I am using Chrome 51.x on Win 10. The latter shouldn’t make a difference. I copied and pasted the sample from the blog, and just like I mentioned earlier I have no problems in Chrome or I.E. At this point, I’m unable to help you further. You can try posting out to the ArcGIS Online GeoNet space: https://geonet.esri.com/community/gis/web-gis/arcgisonline or contact Esri support.

          • egosselin10 says:

            Hi Bern,

            I’m Eric from Esri Canada Technical Support and I tested this for this client and I realized this.

            If you build the story Map based on CSV, we can add audio and video but if we create the Story Map from scratch (empty) and add the point manually and import the images from the local machine, the save will fail as it seem to validate that we cannot have html tag using this method.

            Can you test this workflow?

            Thank
            Eric

          • Bern Szukalski says:

            I’ve been able to repro the issue, and it seems to be specific to when you are adding your own photos using your ArcGIS account, and creating the hosted feature layer. For now this will be a known limitation for that workflow, all other workflows support adding audio via inline markup as the post describes.