> 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/flow/flow-components/audio-player.md). # Audio Player The Avonni Audio Player adds audio playback to your Flow screens. Use it for training materials, voice messages, audio instructions, or any scenario where audio content enhances the user experience.
*** ## Overview Users can listen to audio files with full playback controls — play/pause, progress bar, and volume. The source can be a URL, an uploaded file, or a Salesforce ContentDocumentId (allowing playback of files stored in Salesforce Files). *** ## Configuration To configure it, click the component on the Flow screen. The Edit Audio Player Component panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab. ### Properties **Source** (Required) — specifies which audio file to play. Three approaches are supported: * **URL to an audio file:** Provide the complete URL including `https://`. Supported formats: MP3, WAV, OGG, AAC. * **Upload an audio file:** Click the upload button to select a file from your computer. Best for smaller files (under 5 MB). Supported formats: MP3, WAV, OGG. * **Flow variable or resource:** Switch to the mapped input option and select a text variable, record field, formula, screen component output, or a Salesforce File's **ContentDocumentId** (`069xx000005678ABC`). The Audio Player accepts both external URLs and ContentDocumentIds. **Autoplay** — when enabled, audio starts playing automatically when the screen loads. Default: off (user must click Play). **Loop** — when enabled, audio restarts from the beginning after it finishes. Default: off. **Hide Controls** — when enabled, the playback interface is hidden. Users cannot pause, seek, or adjust volume. Default: off. **Volume** — sets the default volume level when the player loads. Range: 0 (muted) to 100 (maximum). Default: 100. **Playback Rate** — adjusts the speed at which audio plays. Options: 0.5 (half speed), 1 (normal, default), 2 (double speed). *** ## Use Cases ### Example 1: Simple Audio Instruction **Scenario:** Play a voice instruction that users must hear before proceeding. **Configuration:** * **Source:** Upload your instruction MP3 file * **Autoplay:** Checked (starts automatically) * **Loop:** Unchecked (plays once) * **Hide Controls:** Unchecked (users can replay if needed) * **Volume:** `80` * **Playback Rate:** `1` *** ### Example 2: Background Ambient Audio **Scenario:** Continuous background music during a waiting or processing screen. **Configuration:** * **Source:** URL to ambient music file * **Autoplay:** Checked (starts automatically) * **Loop:** Checked (repeats continuously) * **Hide Controls:** Checked (no user interaction needed) * **Volume:** `40` (subtle background level) * **Playback Rate:** `1` *** ### Example 3: Play Audio File from Salesforce Files **Scenario:** Play a voice message or recording that's stored as a Salesforce File and related to the current Account record. #### **Why This Approach Requires Two Get Records** Salesforce stores files using three separate objects that work together: 1. **ContentDocument** - The actual file 2. **ContentVersion** - Versions of the file (contains file details like title, extension, and the ContentDocumentId) 3. **ContentDocumentLink** - The relationship linking files to records (Accounts, Cases, etc.) **The Challenge:** We need to find audio files related to a specific record (Account), but: * `ContentDocumentLink` knows *which files are related to the record* but doesn't have file details (like file extension or title) * `ContentVersion` has *file details and the ContentDocumentId* we need for the Audio Player, but doesn't directly link to records **The Solution:** Bridge the gap with two queries: 1. **First Get Records** finds all files linked to the Account 2. **Second Get Records** uses those ContentDocumentIds to find the specific audio file with the details we need Think of it like a two-step lookup: "What files are attached to this Account?" → "Which of those files is the audio file I want?" #### **Flow Setup** {% stepper %} {% step %} #### **Get Related Files** * Element: Get Records * Object: `ContentDocumentLink` * Filter Conditions: * `LinkedEntityId` Equals `{!recordId}` (current Account ID) * How Many Records: All records * Store in: `RelatedFiles` **What this does:** Retrieves all file relationships for this Account. The result contains ContentDocumentIds of all attached files, but no file details. {% endstep %} {% step %} #### **Get Audio File Details** * Element: Get Records * Object: `ContentVersion` * Filter Conditions: * `ContentDocumentId` In `{!RelatedFiles.ContentDocumentId}` ← Uses IDs from Step 1 * `FileExtension` Equals `mp3` (or `wav`, `ogg`) ← Filters for audio files only * `Title` Contains `voice-message` (optional - to find specific files) * `IsLatest` Equals `True` ← Gets the current version, not old versions * Sort By: `CreatedDate` Descending ← Gets the most recent if multiple match * How Many Records: Only the first record * **Store in:** `AudioFile` * **What this is:** A Record Variable that you'll create to store the ContentVersion record * **How to create it:** When configuring the Get Records element, in the "Store the first record in" field, click "New Resource" to create a new variable: * Resource Type: Variable * API Name: `AudioFile` * Data Type: Record * Object Type: ContentVersion * Allow multiple values: Unchecked (we're storing only one record) **What this does:** Takes the ContentDocumentIds from Step 1 and queries ContentVersion to find which one is an audio file, then stores that record in the `AudioFile` variable so we can reference it later. {% endstep %} {% step %} #### **Check if File Exists (Optional but Recommended** * Element: Decision * Outcome 1: "Audio File Found" * Condition: `{!AudioFile}` Is Null False ← Checks if our variable has a value * Default Outcome: "No Audio File" **What this does:** Prevents errors if no audio file is attached to the Account. {% endstep %} {% step %} #### **Audio Player Screen (on "Audio File Found" path)** * Component: Audio Player * **Source:** `{!AudioFile.ContentDocumentId}` ← References the ContentDocumentId field from our AudioFile variable * **Autoplay:** Unchecked (user controls playback) * **Loop:** Unchecked (plays once) * **Hide Controls:** Unchecked (full user control) * **Volume:** `80` * **Playback Rate:** `1` {% endstep %} {% endstepper %} *** ## Styling The **Style** tab gives you fine-grained control over the Audio Player's appearance. Configure it from the **Style** tab of the Edit Audio Player panel. {% tabs %} {% tab title="Margin" %} Controls outer spacing. * **Top:** Space above the component. * **Right:** Space to the right of the component. * **Bottom:** Space below the component. * **Left:** Space to the left of the component. {% endtab %} {% tab title="Padding" %} Controls inner spacing. * **Top:** Space between the top edge and the content. * **Right:** Space between the right edge and the content. * **Bottom:** Space between the bottom edge and the content. * **Left:** Space between the left edge and the content. {% endtab %} {% tab title="Border" %} Customizes the border. * **Color:** Border color. * **Size:** Border thickness. * **Style:** Border style (solid, dashed, dotted, etc.). * **Radius:** Rounds the corners of the border. {% endtab %} {% tab title="Size" %} Controls dimensions. * **Width:** Component width. * **Height:** Component height. * **Min/Max Width:** Minimum and maximum width constraints. * **Min/Max Height:** Minimum and maximum height constraints. * **Overflow:** How content is handled when it exceeds the component bounds. {% endtab %} {% endtabs %} ## Output Variables The Audio Player exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Audio Player component, and pick the output variable you need. ### Playback State Available after the user has interacted with the player or the screen advances. | Output variable | Type | What it returns | | ---------------------- | ------ | ---------------------------------------------------------------- | | **Current Time Stamp** | Number | The playback position (in seconds) when the screen was advanced. | | **Duration** | Number | The total length of the loaded audio file, in seconds. | > **Example:** Use **Current Time Stamp** and **Duration** together to calculate how much of the audio the user listened to — for example, to branch the flow based on whether they heard at least 80% of an instruction before continuing. --- # 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/flow/flow-components/audio-player.md?ask=&goal= ``` `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.