Showing a specific sound file as a pop up in ArcGIS Online based on a variable

Question

I am trying to configure a pop up on a webmap in ArcGIS Online (Organisation). I want the pop up to show a small audio player pointing to an mp3 file. I want the mp3 file to change depending on what feature is selected on the map by the user.

I have a single point dataset with a single field "Species". I have a value list assigned to this field of around 40 different species. I also have an mp3 file for each of the 40 species.

My thinking was that I could use an if/else statement to select which mp3 file should be displayed in the pop up.

To create the pop up, I am creating a Custom Attribute Display.

{Species} was heard here
    <br />
    <br />
    <audio controls=""> <source src="https://www.xeno-canto.org/sounds/uploaded/XTVEPHMPPJ/Haematopus_leucopodus_1984_02_04e.mp3" type="audio/mpeg"></source> </audio>

The above code works to bring up a player

I can also add a second player to the pop up as per below

{Species} was heard here
<br />
<br />
<audio controls=""> <source src="https://downloads.esri.com/agol/labs/maptour/horse.mp3" type="audio/mpeg"></source> </audio>
<br />
<br />
<audio controls=""> <source src="https://www.xeno-canto.org/sounds/uploaded/XTVEPHMPPJ/Haematopus_leucopodus_1984_02_04e.mp3" type="audio/mpeg"></source> </audio>

This brings up 2 audio players within the pop up window.

But I am unable to choose the file based on the {Species} variable.

Attempting to do an if/else statement

{Species} was heard here
<br />
<br />
IIf($feature.Species=="Egret". "<audio controls=""> <source src="https://downloads.esri.com/agol/labs/maptour/horse.mp3" type="audio/mpeg"></source> </audio>", "<audio controls=""> <source src="https://www.xeno-canto.org/sounds/uploaded/XTVEPHMPPJ/Haematopus_leucopodus_1984_02_04e.mp3" type="audio/mpeg"></source> </audio>

Brings back this pop up:

I've also tried using this code in an Arcade expression, but I can't even get a single audio player to show.

Something like:

If {Species} = Crow Play crow MP3 URL Else if {Species} = Egret Play Egret MP3 URL Else if {Species} = Robin Play Robin MP3 URL

Is anybody able to advise how I can show a single audio player depending on what {Species} value is assigned to the point the user has clicked on?

Answer 1

The key step is to either have a field with the filename, or create an attribute expression that has the file name (or full URL), but not the full HTML.

If you have a field with contents that matches the file name, it's as easy as configure the pop-up, choose "A custom attribute display", and click the icon for "View HTML Source" and add:

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

If you don't have such a field, you can create an attribute expression that creates that info in a virtual field that you can use as above.

Answer 2

I've had very little experience in embedding controls into pop ups nor am I a fully fledge web developer but I can tell by looking at your sample code that its incorrectly structured. First of all look at this blog there is a code snippet in it.

You have your code structured as such:

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

You don't need the </source>, you see it correctly structured in @Bjorn_Svenssons answer.

Your attempt to put an if then else like logic is flawed, you wrote:

{Species} was heard here
<br/>
<br/>
IIf($feature.Species=="Egret". "<audio controls=""> <source src="https://downloads.esri.com/agol/labs/maptour/horse.mp3" type="audio/mpeg">
</source>
</audio>", "<audio controls="">
<source src="https://www.xeno-canto.org/sounds/uploaded/XTVEPHMPPJ/Haematopus_leucopodus_1984_02_04e.mp3" type="audio/mpeg">
</source>
</audio>

For your IIf() command you have a full stop instead of a comma after "Egret" you also have no closing bracket. So your code would never execute anyway. But I think the bigger issue here is you are attempting to embed arcade commands directly into HTML, which "ain't gona work".

Have a look at this blog on how to integrate arcade logic into HTML. It's not something I have had to do yet.