How to add Audio to a Pop-Up

1780
8
03-28-2018 06:48 AM
RachelMurphy
New Contributor II

I have a number of small audio files that I uploaded to Soundcloud.  I want to embed them into pop-ups within AGOL so that they can be viewed via a webapp.  I want to user to be able to use the audiofile within the pop-up rather than being directed to the soundcloud site. 

All my information is created in Excel first. I add the Excel file to ArcMap.  However, the Soundcloud embed code is too long to fit in one column in my attribute table and turns into a 'blob'.

I have also tried shortening the embed code to just the unique elements, exporting as a zipped shapefile to AGOL, and then adding the embed code as html, with the unique elements being imported from the shapefile attribute data, but this does not work.  

I also tried adding the html audio tags and this displayed a player but I can't figure out how to get the Soundcloud url to work within that.

The only way I can find of incorporating the audio file at the moment is through a simple text link but this directs people away from the pop-up to the Soundcloud site, so is not a good user experience.

Grateful for any advice or suggestions!

Tags (2)
0 Kudos
8 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Rachel,

  So sound clod does not give you a url that allows you to directly access the audio file (i.e the mp3, wav, etc)?

0 Kudos
Laura_GayleGreen
New Contributor II

I'm having similar issues with my Story Map: http://www.arcgis.com/apps/MapTour/index.html?appid=5cc1f16e36aa43149b95113bdf682530 

I've tried linking Soundcloud recordings (which don't end in .mp3), they don't work. I've tried linking the same recordings, but on my university's OneDrive (and that "shared" link also doesn't end in .mp3) and that won't work. I also tried uploading to Dropbox (and using links that *do* end in .mp3) and they won't work either! The code for one of the maps/scenes is: <audio controls="">&lt;source src='https://www.dropbox.com/s/c2ovfg110qoofjw/St.Marks.PicnicPond.2018.09.09.AM.mp3' type='audio/mpeg' /&gt;</audio> 

the < and > characters always get converted to &lt; and /&gt;

Given that I'm doing soundscape stories/maps, this is a HUGE issue!!

thanks for any solutions that can be shared!

cheers-

Laura Gayle

0 Kudos
RupertEssinger
Frequent Contributor II

Hi Laura

The issue you are seeing in Story Map Tour is one we are fixing in the ArcGIS Online update (Tuesday night, Sept 18th, assuming it doesn't get delayed to the next night).  In Map Tours created since 26th June, we over-sanitize audio HTML and this causes those &lt and &gt escape characters to appear. Our fix will enable you to embed new audio HTML into Story Map Tours created since 26th June. (Map Tours created before then don't have the issue because our sanitization kicked in just for tours created after then). The fix won't mend your sanitized HTML but you'll be able to add new HTML and it should work.

Note: Story Map Tours that you create by uploading images directly into the Story Map Tour Builder can't have audio embedded in their captions, irrespective of when they were created. Our fix next week doesn't address that. It's a limitation of how the image upload works for Map Tour. (See Frequently Asked Questions | Story Maps  for why). 

Bottom line: for your Map Tours that don't use image upload, embedding audio in captions will start working again next week (I hope!!!).  So you'll be able to embed audio in Map Tours that use Flickr, Google+, YouTube videos or images referenced via URLs. 

Rupert

Laura_GayleGreen
New Contributor II

Rupert,

Thank you for this information! I have a related question -- which I can test next Wednesday. Will the generated URLs from sites such as Soundcloud work for audio links or do the links have to be actual file names ending in .mp3 (or other audio/video file extension names)?

TIA and thank you for your quick response earlier!

cheers-

Laura Gayle

0 Kudos
RupertEssinger
Frequent Contributor II

Hi Rachel (original question about how to embed audio in popups in web maps). 

I was trying this out last week and I found that for an MP3 file accessed via a URL on the web, this embed code worked in popups nicely:

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

Laura_GayleGreen
New Contributor II

Good morning folks-

Well, I tried editing my sound links, and it still isn't working. I created a new story map (http://arcg.is/1GGuOb ) and the sound links still aren't working. My links to sound are the ones created by SoundCloud, not ones ending in .mp3. Is that a problem? Thanks for any assistance, folks.

cheers-

Laura Gayle

0 Kudos
Laura_GayleGreen
New Contributor II

Good morning again folks-

This morning I was able to have links to a sound file (not a redirect link from a service such as SoundCloud, OneDrive, Dropbox, etc.) work in my map http://arcg.is/0Cv1LX . 

Is there a plan to allow redirect types of audio links in story maps? I realize there are issues with these, but thought it was worth asking. 

Cheers-

Laura Gayle

0 Kudos
RDIApps
New Contributor II

I got SoundCloud files to work in a popup!

Here's the deal -

1. In SoundCloud:

  • For the track(s) of interest, got to Edit > Permissions, and  include in RSS feed
    RDIApps_0-1639528525529.png

     

  • In your account page, go to Settings > Content and copy the RSS feed URL. I also checked the Upload Defaults Include in RSS feed option, but don't know if that is mandatory
    RDIApps_1-1639528626511.png

2. In a browser, paste the RSS feed URL

  • in the xml that opens, look for the file name that ends with .mp3; copy that
    RDIApps_2-1639528835189.png

3. In your popup, use the HTML audio element as shown above by RupertEssinger (9/14/2018). You can either enter the url directly into the source tag or create a feature attribute, populate with individual links, and then use the attribute name as the src. In the example below, my field is named "AudioLink".

RDIApps_3-1639529476509.png

Good luck!

0 Kudos