Map Journal Customizations — Part 1: Adding Audio to a Section
Hey everybody, my name is Tim and I love coding! By day I am a E911 GIS Analyst and by night I try to teach myself coding. When I code, I mostly work with the ArcGIS Javascript API, which I use to create fun and sometimes even useful applications. You can find some of them on my website.
The ESRI story map team has asked me to write a series of guest posts on the Story Maps Developer’s blog. I have created a heavily customized Map Journal Story Map and will talk about each customization, starting with adding Section Audio.
Whenever the user goes to a different section, you can have different audio files being played. This will also add a playlist and a mute button to your map journal story map.
Where do we start?
You will need the following:
- Have access to a web server to host your customized story.
- Create a Story Map Journal.
- Basic understanding of HTML/CSS/JavaScript.
To find out how to setup the customized version of your Story map, please follow the instructions under the “Getting Started” section in this post.
Let’s Customize!
Once you have created your story map and hosted it on your server, open the index.html file again and go to the following line (59).
Between the style tags we will need to place the code which will style our playlist and mute button. It should look like this:
Next we will need to add the playlist container and the mute button. We will place that code between the ESRI logo wrapper and the app Title (should be around line 195)
The code that needs to be placed there looks like this:
After line 16 (<ul id =”playlist”>)is where you will be able to add the audio files you would like to play. In my example I have added 3 files, two stored on the server and one from a website.
Almost done!
In the last part we will be adding the Magic (javascript code)! Go to line 337, which looks like this:
We will replace the code that is in between the script tags with the following so it will look like this:
The setmusic function, starting at line 47, is responsible for playing the audio in certain sections. It is important to note that the first audio file in your player has the number 0 and not 1. Here is how your playlist and buttons will look like if everything worked!
Do you have an example?
Sure I do! I have created a simple example so you can see how everything will look in a live story map. You can find this example here. To view the source code, which you can also use as a starting off point can be viewed here.
