How to add Audio to a Pop-Up

RachelMurphy · ‎03-28-2018

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!

RobertScheitlin__GISP · ‎03-28-2018

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)?

Laura_GayleGreen · ‎09-14-2018

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=""><source src='https://www.dropbox.com/s/c2ovfg110qoofjw/St.Marks.PicnicPond.2018.09.09.AM.mp3' type='audio/mpeg' /></audio>

the < and > characters always get converted to < and />

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

thanks for any solutions that can be shared!

cheers-

Laura Gayle

RupertEssinger · ‎09-14-2018

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 · ‎09-15-2018

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

RupertEssinger · ‎09-14-2018

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 · ‎09-19-2018

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

Laura_GayleGreen · ‎09-20-2018

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

RDIApps · ‎12-14-2021

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
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

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

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".

Good luck!