Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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

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

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store