Add <audio> to your Map Journal

Owen Evans
Nov 20, 2015 · 2 min read

The November 2015 release of Story Maps brought support for the HTML <audio> tag to Map Journal. Now you can add audio like sound or music to a journal with just a few lines of code to bring a new dimension to your Story Map.

When editing a section of your Map Journal, just switch to Source View (using the button shown in the orange circle) and add your <audio> code. There are two samples provided below: one for in-line sound clips and one for ambient sound.

You can also add sound to your Story Map Tours; see this blog post for details.

Sound clips

One way to use sound in a Map Journal is to insert an audio file in-line in your story. When your readers get to that point in the story they will see a small sound clip player and will use it to play the audio when they are ready. See this example.

To do this use the controls attribute as shown below. It’s also a good idea to add a message for readers who may be using a browser that doesn’t support the <audio> tag. The message will only display if the clip can’t be played.

<audio controls>
<source src="http://storymaps.esri.com/stories/2013/endangered-languages/data/media/15_Sec_Audio/Garifuna/Lovell_short.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

Ambient sound

The <audio> tag also supports options for looping (loop) and automatically starting the audio when your Map Journal loads (autoplay). Use one or both of these options if you want your audience to experience ambient sound or music while they read through your Story Map. Here’s an example of a story map with ambient audio.

<audio loop autoplay>
<source src="http://www.mfiles.co.uk/mp3-downloads/Toccata-and-Fugue-Dm.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

music source: mfiles

Story Maps Developers' Corner

Learn best practices, read quick tips, and discover new ways to make your story map stand out from the crowd. Start creating your story at: http://storymaps.arcgis.com

Owen Evans

Written by

Product Engineer on Esri's Story Maps Development Team.

Story Maps Developers' Corner

Learn best practices, read quick tips, and discover new ways to make your story map stand out from the crowd. Start creating your story at: http://storymaps.arcgis.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade