> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-audio.md).

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

{% @arcade/embed url="<https://app.arcade.software/share/mIko3oDb6PSstZ1dnEzM>" flowId="mIko3oDb6PSstZ1dnEzM" %}

### Key features

* **Flexible Source:** Play audio from a direct URL or a Salesforce ContentDocumentId, supporting MP3, WAV, and OGG formats.
* **Playback Control:** Configure auto play and looping, or hide the default player controls for a guided experience.
* **Header Labeling:** Add a title, caption, and icon above the player for context.
* **Card Display:** Wrap the player in a styled card for dashboards and record pages.

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

### Properties

| Label                            | Type    | Default | Required | Description                                                                                                                                                               |
| -------------------------------- | ------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Audio Url or Content Document Id | String  | —       | Yes      | The URL or ContentDocumentId of the audio file to play. Supports formats such as MP3, WAV, and OGG. Example: <https://example.com/audio.mp3> or 069XXXXXXXXXXXX.          |
| Auto Play                        | Boolean | `false` |          | If true, the audio will start playing automatically when loaded. Useful for announcements or urgent audio alerts but should be used with consideration for accessibility. |
| Loop                             | Boolean | `false` |          | If true, the audio will replay automatically after finishing. Ideal for continuous background audio or repeated training instructions.                                    |
| Hide Controls                    | Boolean | `false` |          | If true, hides the default audio player controls (play, pause, volume, etc.), providing a cleaner or more controlled listening experience.                                |
| Header - Title                   | String  | —       |          | Text shown as the main heading above the audio player. Ideal for contextual labeling, such as “Top Opportunities” or “Recent Cases.”                                      |
| Header - Caption                 | String  | —       |          | Subheading text shown below the main title. Used to provide additional context such as “Sorted by Close Date” or “Filtered by Priority.”                                  |
| Header - Icon Name               | String  | —       |          | Salesforce Lightning Design System icon name (e.g., utility:play, doctype:audio) that appears next to the title. Used for visual context or branding.                     |
| Display as Card                  | Boolean | `false` |          | If true, displays the audio player inside a styled card container for better integration into dashboards or record pages.                                                 |

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

{% @arcade/embed url="<https://app.arcade.software/share/uKmt5XXzr9fLDnXZpCOO>" flowId="uKmt5XXzr9fLDnXZpCOO" %}

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

**Steps**

{% stepper %}
{% step %}

#### **Navigate to Lightning App Builder**

Edit your Case record page (Setup > Lightning App Builder > find your Case page)
{% endstep %}

{% step %}

#### **Drag the AX - Audio component onto your page layout**

{% endstep %}

{% step %}

#### **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
  {% endstep %}

{% step %}

#### **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)
  {% endstep %}

{% step %}

#### **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`
  {% endstep %}

{% step %}

#### **Configure Display Options**

Check **Display as Card** for professional presentation with styled container
{% endstep %}

{% step %}

#### **Save and test audio playback**

{% endstep %}
{% endstepper %}

### Example 2: Add audio instructions to Knowledge training article

{% @arcade/embed url="<https://app.arcade.software/share/f8QpIWJMAfODjnt5xszg>" flowId="f8QpIWJMAfODjnt5xszg" %}

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

{% stepper %}
{% step %}

#### **Navigate to Lightning App Builder**

Edit your Case record page (Setup > Lightning App Builder > find your Knowledge page)
{% endstep %}

{% step %}

#### **Drag the AX - Audio component onto your page layout**

{% endstep %}

{% step %}

#### **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
  {% endstep %}

{% step %}

#### **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)
  {% endstep %}

{% step %}

#### **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`
  {% endstep %}

{% step %}

#### **Configure Display Options**

Check **Display as Card** for professional presentation with styled container
{% endstep %}

{% step %}

#### **Save and test audio playback**

{% endstep %}
{% endstepper %}

***

## 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 <support@avonni.app> for assistance.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-audio.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.