Audio not playing in Story Map Tour

[DavidEvans5]

I am trying to add audio clips to a Walking Tour story map I am creating using the instructions featured in the Adding audio to your Story Map Tour  ArcGIS Blog article. 

To get started I'm using the same audio file and HTML code shown in the tutorial and pasting the code into the caption. The audio player appears below the text but nothing happens when I click/tap on the play button when I preview or load the story map on either a desktop PC or a mobile device. 

If I go back to edit the caption I've notice that the HTML code has been altered in that the "<" a ">" symbols have been replaced by &lt; and &gt; respectively.  Below is copy of the code after it has been altered.

<audio controls="">&lt;source jive-link-external-small" href="https://community.esri.com/http%3A%2F%2Fdownloads.esri.com%2Fagol%2Flabs%2Fmaptour%2Fhorse.mp3" rel="nofollow" target="_blank">http://downloads.esri.com/agol/labs/maptour/horse.mp3" type="audio/mpeg"&gt; &lt;embed height="50" width="100"
jive-link-external-small" href="https://community.esri.com/http%3A%2F%2Fdownloads.esri.com%2Fagol%2Flabs%2Fmaptour%2Fhorse.mp3" rel="nofollow" target="_blank">http://downloads.esri.com/agol/labs/maptour/horse.mp3"&gt;</audio>

Here is a link to the map itself, the map is public so should be accessible to anyone. 

If there's anyone out there who has encountered this problem that can provide a solution I would hugely grateful!

[MarkCooney]

Hi David,

Make sure to check that your HTML is valid.  You need a space between audio and controls, source and src, and closing tags.  Here is an example that works.  https://arcg.is/0PuOaG 

Mark

[DavidEvans5]

That did it! You are a genius! (I'm sure Rupert and Alison would have pointed me to the same error that results from pasting the code which somehow removes those spaces)

The amended code for anyone who comes across this problem (or is just curious) is as follows:

<audio controls>

<source src="http://downloads.esri.com/agol/labs/maptour/horse.mp3" type="audio/mpeg">

</audio>

Thank you again!

[RupertEssinger · Accepted solution]

Here's the embed code to use. 

<audio controls><source src="https://downloads.esri.com/agol/labs/maptour/horse.mp3" type="audio/mpeg"></audio>

I noticed that if you copy and paste it out of the blog post, some of the spaces are missing, as you can see in the screenshot you posted.

Rupert

[DavidEvans5]

Thanks Rupert, Mark just beat you to it. I will upload the other audio samples we want to use (as much as I love hearing that horse sample now that its working, it's not actually what we intended to use!), and I will mark this thread as solved if I don't run into any other problems.

Thanks again

David 

[RupertEssinger]

Good to hear you got it to work: sorry for all the hoops we made you jump through. I also feel like I don't want to hear that horse ever again   We'll look at getting that blog post updated to avoid the issue where for some reason copying that embed code out of it is losing vital spaces from the tags.

Rupert