AnsweredAssumed Answered

Audio not playing in Story Map Tour

Question asked by devans on Jul 10, 2018
Latest reply on Sep 19, 2018 by ressinger-esristaff

Like • Show 0 Likes0
Comment • 14

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 < and > respectively. Below is copy of the code after it has been altered.

<audio controls=""><source jive-link-external-small" href="/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"> <embed height="50" width="100"
jive-link-external-small" href="/http%3A%2F%2Fdownloads.esri.com%2Fagol%2Flabs%2Fmaptour%2Fhorse.mp3" rel="nofollow" target="_blank">http://downloads.esri.com/agol/labs/maptour/horse.mp3"></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!

ressinger-esristaff

Sep 19, 2018 11:57 AM

Correct Answer

Here's the embed code to use.

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

See the reply in context

No one else had this question

Outcomes

14 Replies

ASizer-esristaff Jul 20, 2018 1:08 PM
Mark Correct
Correct Answer
Hi there,

Apologies -- that post needs some updating. Please try this html instead:
```
<audio controls src="http://downloads.esri.com/agol/labs/maptour/horse.mp3" type="audio/mpeg"></audio>
```
Note this won't work if your Map Tour points layer is a hosted feature layer, but given that you've already got an <audio> element showing up, I think this particular layer is fine.
1 person found this helpful
Like • Show 0 Likes0
Actions
- devans @ ASizer-esristaff on Jul 20, 2018 1:56 PM
  Mark Correct
  Correct Answer
  Hi Alison
  
  Thank you for the response! I have tried the code you provided and unfortunately the audio clip still does not play!! The audio player appears but there's no response from clicking/tapping on the play button.
  
  You said that it would not work if the tour points layer is a hosted feature layer. I created the Story Map entirely within the ESRI Story Map template, so I'm guessing that the Map tour points are hosted (in my organization's AGOL account).
  
  We have other feature services published from ArcGIS Desktop and hosted through ArcGIS Server that we can utilize in web-maps and web-apps. Do I need to create a feature service for the tour points in the same way? Is there some documentation or instructions online you can point me towards to show how I can accomplish this?
  
  Thanks again!
  
  David
  Like • Show 0 Likes0
  Actions
  - ASizer-esristaff @ devans on Jul 24, 2018 7:36 AM
    Mark Correct
    Correct Answer
    Ugh, sorry about that code not working. This may be a bug on our end. I'm looking into it and will report back shortly.
    
    Alison
    Like • Show 0 Likes0
    Actions
    - ressinger-esristaff @ ASizer-esristaff on Jul 31, 2018 9:03 AM
      Mark Correct
      Correct Answer
      Hi David,
      
      Sorry about the issue.
      
      I've been working with Alison Sizer on this issue (thanks Alison) and it is a bug we introduced inadvertently in our June 26th 2018 update to ArcGIS Online. Map Tours created before June 26th that contain embedded audio continue to work OK, and you can continue to add embedded audio into those tours using the embed code in the blog you referenced. We are looking into fixing this for our upcoming mid-September update.
      
      Until then I don't think there's a workaround, apart from using a Map Tour created before June 26th to present audio. For example, if you or someone in your Organization created any Map Tours before June 26th, you may be able to repurpose one of them for your project. The important date is when the tour was created, not when it was last modified, so if you or a colleague have an unwanted demo or test tour, you could use that as the basis for your new tour project in order to include audio. Use the audio embed code from the blog you referenced, not the code that Alison posted above.
      
      Rupert
      Like • Show 0 Likes0
      Actions
      - devans @ ressinger-esristaff on Jul 30, 2018 11:19 AM
        Mark Correct
        Correct Answer
        Hello Rupert,
        
        This audio issue continues to defy every solution we attempt to throw at it: I did have an old story map that used the tour template I was able to re-purpose to see if we could get the audio working. I used both the code block that Alison suggested and the code block from the Blog article but when I attempt to save the map, I get an error message informing me that there's is an invalid html tag or description. This happens with either block of code.
        
        I can make the map public and share the URL with you if you would like to take a look at it, but since there's no way to save the map with the audio player code I'm not sure how much you can learn from looking at it. One thing I noticed is that this (earlier) story map template does not appear to have any way to link to externally hosted images (so images have to be hosted within the map), and you cannot use the import button to import your tour points from a .csv file.
        
        It's okay if we have to wait until the September update to use audio in the tour map, but if you do have any other ideas for how to get audio working in a tour map before then I'd be happy to give it another try.
        
        Thanks again!
        
        David
        Like • Show 0 Likes0
        Actions
        ressinger-esristaff @ devans on Jul 31, 2018 9:05 AM
        Mark Correct
        Correct Answer
        Hi David,
        
        Oops, sorry I should have mentioned this in my first reply above: If you repurpose an old Map Tour to work around the bug that was introduced in tours created after June 26th, you have to use a Map Tour that does not use a hosted feature service behind the scenes, i.e. a tour that is not created by uploading images directly into the Builder (because that workflow uses a feature service in which the images are stored).
        
        The reason for this is that feature services impose their own, stricter set of supported HTML rules, and this does not include Audio. This is what is giving you the message about the invalid tag when you try and save. Map Tours that use images uploaded into the builder have never supported tags like Audio and Hr (this disparate HTML support is a peculiarity of Map Tour that we don't like and that we won't be carrying forward in our future dev plans for this app) and don't let you save the tour until you remove any unsupported HTML.
        
        So if you repurpose an old Map Tour to work around this issue, it has to be a tour that references its images from Flickr, Google+, or directly via URLs (either URLs entered manually in the Builder or via URLs included as data in a CSV file uploaded into the Builder, or via URLs included as attributes in a CSV, shapefile or feature layer added into a web map that was then published as a Map Tour. Use the audio embed code from the blog you referenced, not the code that Alison posted above. So I am pretty confident that the Map Tour you are trying this workaround with uses uploaded images. Sorry about this extra hoop. Note that you can't change an existing Map Tour that uses uploaded images so that it no longer uses them, because this option is chosen at initial create time.
        
        I'm hoping you can find an older tour to work with that doesn't use image upload. Another alternative would be to use Story Map Journal for your tour-type story. Using Map Journal lets you present multiple images, embedded content, including audio (using the code that Alison posted above) and unlimited narrative text, and so can be a great way to make more detailed tours. There are some examples in our Gallery (click this link for examples). Out-of-the-box Map Journal doesn't support clicking on a point on the map to go to the section about that place, but if you need that it can be added via some customization.
        
        Rupert
        Like • Show 0 Likes0
        Actions
      - balke13 @ ressinger-esristaff on Aug 4, 2018 9:04 AM
        Mark Correct
        Correct Answer
        Rupert Essinger and Alison Sizer
        
        Rupert,
        I am in the process of moving the Missoula Children's Poetry Map that Ken Wall and I meet with you about in July to the final resting place on the School District ArcGIS Online site. However I am running into the same audio issue as described above (audio was working in the version published prior to the June update).
        
        Does this audio bug also occur in the Shortlist app? And is there really no working around or solution until September?
        
        Kyle Balke
        Like • Show 0 Likes0
        Actions
        ressinger-esristaff @ balke13 on Aug 4, 2018 1:30 PM
        Mark Correct
        Correct Answer
        Hi Kyle
        Yes sorry about the issue. You are correct that the same issue applies to Shortlist since you have created your latest version of the Shortlist since June 26th. Audio embeds in Shortlists will continue to work in Shortlists created before that date. So could you continue to use your original version of your Shortlist, which was created before that date?
        
        Rupert
        Like • Show 0 Likes0
        Actions
devans Sep 19, 2018 11:18 AM
Mark Correct
Correct Answer
Hi Rupert Essinger and Alison Sizer

I have been anxiously waiting for the September update to ArcGIS online hoping that there would be a fix for the problem we discussed here a couple of months ago that was preventing me from including audio clips in a Story Map I was developing for a digital walking tour project.

The September update was rolled out last night and I went ahead and created a completely new Story map for testing purposes and imported my tour stop points from a .csv file which has the links to the pictures and thumbnails used within the story map (all of which are hosted on through our own server). I followed the steps described in the recent ArcGIS blog article: Adding audio to your Story Map Tour and published this new map and ran into a new problem with the same result: now the audio player no longer appears within the caption so no audio can be played. I just get part of the code that I pasted in (shown below). It seems that after I paste the code, part of the code (the </audio> part) is erased. I have tried this in both Chrome and Internet Explorer with the same result.

I also tried using the code that was suggested by Alison on July 20, which at least loads the audio player, but the player itself is unresponsive when the story map is published.

Here is a link to this new version of the walking tour map if you would like to see what is happening. Is there anything I’m missing here or that you can suggest I try to get it to work?

Thanks

David
Like • Show 0 Likes0
Actions
- MCooney-esristaff @ devans on Sep 19, 2018 11:47 AM
  Mark Correct
  Correct Answer
  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
  1 person found this helpful
  Like • Show 1 Like1
  Actions
  - devans @ MCooney-esristaff on Sep 19, 2018 11:57 AM
    Mark Correct
    Correct Answer
    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!
    Like • Show 0 Likes0
    Actions
- ressinger-esristaff @ devans on Sep 19, 2018 11:57 AM
  Unmark Correct
  Correct Answer
  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
  1 person found this helpful
  Like • Show 1 Like1
  Actions
  - devans @ ressinger-esristaff on Sep 19, 2018 12:02 PM
    Mark Correct
    Correct Answer
    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
    Like • Show 0 Likes0
    Actions
    - ressinger-esristaff @ devans on Sep 19, 2018 3:08 PM
      Mark Correct
      Correct Answer
      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
      Like • Show 0 Likes0
      Actions

GeoNet

The Esri Community

Audio not playing in Story Map Tour

Outcomes

Related Content

Recommended Content

Incoming Links