AX - Audio

Overview

AX - Audio is a Lightning App Builder component that embeds audio players directly on your record, app, and home pages.

Use it to add audio content like training materials, voice messages, product demos, or announcements right where users work in Salesforce. Configure the player's appearance and controls in App Builder—no code required.

Getting Started

Use this simple tutorial to learn the basics of the Audio component and start building your use cases.

Key Features

• Supports MP3, WAV, and OGG formats

• Customizable playback and display options

• Integrates audio into records and dashboards

Use Cases

• Product Page: Embed sound samples for audio equipment or voice-over demos.

• Training Record: Add audio instructions linked to training modules.

• Customer Record: Play voicemail recordings or support call summaries.

• Internal Announcements: Share audio updates or leadership messages.

• Learning Hub: Include audio tips or reminders for employees.

• Marketing Portal: Feature promotional jingles or audio ads.

Configuration

Add the Audio component to a Lightning page in App Builder, then configure it in the Properties Panel.

Basic Properties

These control the audio file and its playback behavior.

Property	Type	Description	Example
Audio Url or Content Document Id	String	URL or ContentDocumentId of the audio file (supports MP3, WAV, OGG).	https://example.com/audio.mp3 or 069XXXXXXXXXXXX
Auto Play	Boolean	Starts playback automatically if true (use cautiously for accessibility).	false
Loop	Boolean	Replays the audio automatically if true.	false
Hide Controls	Boolean	Hides player controls (play, pause, volume) if true for a cleaner look.	false
Display as Card	Boolean	Shows the audio player in a card layout if true for better page integration.	true

Best Practice: Use a ContentDocumentId for secure Salesforce files; test autoplay on different devices. Dynamic values (e.g., {!Record.FieldApiName}) are supported only on Lightning Record Pages.

Note: No Interactions or Style tabs are available in App Builder for this component, as styling and interactions are predefined or managed via properties.

---

Use Case Examples

Example 1: Add a customer recording on the Case record page

Scenario: Embed an audio recording on a Case record, allowing your support users to easily dive into your customers' needs.

Prerequisites: This example assumes you have created a AudioRecording__c custom field on the Case object to store the recording file's ContentDocumentId.

Steps

1

Navigate to Lightning App Builder

Edit your Case record page (Setup > Lightning App Builder > find your Case page)

2

Drag the AX - Audio component onto your page layout

3

Configure Audio Source

• Set Audio Url or Content Document Id to {{Record.AudioRecording__c}} (assumes custom field storing ContentDocumentId)

• Alternative: Use a direct ContentDocumentId like 069XXXXXXXXXXXX for testing

4

Configure Playback Controls

• Leave Auto Play unchecked (allows users to start audio when ready)

• Leave Loop unchecked (single playthrough for instructional content)

• Leave Hide Controls unchecked (gives users full control over playback)

5

Customize Header

• Set Header Title to Customer Complaint Call

• Set Header Caption to Recording of call with {{Record.Contact.Name}}

• Set Header Icon Name to utility:volume_high

6

Configure Display Options

Check Display as Card for professional presentation with styled container

7

Save and test audio playback

Example 2: Add audio instructions to Knowledge training article

Scenario: Provide smoother training with guided explanations for user onboarding.

Prerequisites: This example assumes you have created a AudioRecording__c custom field on the Knowledge object to store the recording file's ContentDocumentId.

Steps

1

Navigate to Lightning App Builder

Edit your Case record page (Setup > Lightning App Builder > find your Knowledge page)

2

Drag the AX - Audio component onto your page layout

3

Configure Audio Source

• Set Audio Url or Content Document Id to {{Record.AudioRecording__c}} (assumes custom field storing ContentDocumentId)

• Alternative: Use a direct ContentDocumentId like 069XXXXXXXXXXXX for testing

4

Configure Playback Controls

• Check Auto Play (allows users be welcomed to the training article as they open it)

• Leave Loop unchecked (single playthrough for instructional content)

• Leave Hide Controls unchecked (gives users full control over playback)

5

Customize Header

• Set Header Title to Training Instructions

• Set Header Caption to Audio guidance for the {{Record.Title}} module

• Set Header Icon Name to utility:volume_high

6

Configure Display Options

Check Display as Card for professional presentation with styled container

7

Save and test audio playback

---

Key Considerations

• File Source: Use ContentDocumentId for secure files; ensure URLs are accessible.

• Playback Settings: Avoid autoplay on public pages for accessibility; use Loop for repetitive content.

• Page Layout: Enable Display as Card for a polished look on dashboards.

• Performance: Keep audio files small to avoid page load issues.

• Accessibility: Test audio with screen readers; provide transcripts if needed.

---

Troubleshooting Common Issues

• Audio Not Playing: Verify the URL or ContentDocumentId is valid and accessible. Check file format (MP3, WAV, OGG).

• Controls Missing: Ensure Hide Controls is false if controls are needed.

• Dynamic Content Fails: Confirm {{Record.FieldApiName}} syntax matches the object’s field on Record Pages.

• If Issues Persist: Contact our support team at [email protected] for assistance.

---

Summary

The Avonni Audio component enriches Lightning pages with embedded audio for training, marketing, or customer use cases. It’s perfect for delivering sound content seamlessly.