Add <audio> to your Map Journal

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