Automate feature-specific audio playback in ArcGIS Experience Builder

Summary

In ArcGIS Experience Builder, audio files are often included in web apps as attachments or play buttons that require manual interaction after a feature is selected. This user experience can be enhanced by automating the audio playback upon feature selection. 

This article provides the workflow to configure pop-ups based on string field values using Arcade expressions in ArcGIS Online Map Viewer to enable automatic audio playback in ArcGIS Experience Builder.

Procedure

• Prerequisites to successfully automate the audio playback:
  • Share the layer containing the audio attachments publicly to avoid token issues, as private layers include expiring tokens in the attachment URL, while public layers do not. Alternatively, host the audio files on a third-party platform.
  • Ensure the attachment URL ends with '.mp3'.

1. In ArcGIS Online, open the web map.
2. In the Layers pane, select the feature layer.
3. On the Settings (light) toolbar, click Pop-ups. Ensure Enable pop-ups is toggled on.
4. In the Pop-ups pane, create an Arcade expression to populate the field and display it in the pop-up. Refer to ArcGIS Online: Use expressions for instructions.
5. In the editor window, specify the expression below

• Use the Arcade expression below for a single feature.

// Declare a variable to store the HTML audio output
var audioOutput
            
// Check if the feature field equals "Example"
if ($feature.name == "Example")
            
// If the condition is true, assign an HTML audio element to 'audioOutput'
// The audio element will autoplay and use the specified MP3 file as its source
            
{  audioOutput = `<audio autoplay> 
    <source src="AttachmentURL.mp3" type="audio/mp3">
  </audio>`
}
//Use audioOutput = <audio controls> for a play button instead of autoplay
//Repeat the above conditional block for each point or category with an audio file
            
// Return an object that defines the output type and content
return { 
  type : 'text', // Specifies that the output is text
  text : audioOutput // The text property supports HTML tags, so the audio will play 
}

• Use the Arcade expression below for multiple features.

// Declare a variable to store the HTML audio output
var audioOutput 

// Check if the feature field equals "Example"
if ($feature.name == "Example") 

// If the condition is true, assign an HTML audio element to 'audioOutput'
// The audio element will autoplay and use the specified MP3 file as its source 

{  
  audioOutput = `<audio autoplay> 
    <source src="AttachmentURL.mp3" type="audio/mp3">
  </audio>`
} 

// Check if the feature field equals "Example 2"
if ($feature.name == "Example 2")

{  
  audioOutput = `<audio autoplay> 
    <source src=" AttachmentURL.mp3" type="audio/mp3">
  </audio>`
}

// Use audioOutput = <audio controls> for a play button instead of autoplay
// Repeat the above conditional block for each point or category with an audio file

// Return an object that defines the output type and content
return { 
  type : 'text', // Specifies that the output is text
  text : audioOutput // The text property supports HTML tags, so the audio will play 
}

6. Click Done.
7. Save the web map in Map Viewer.