> 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/dynamic-components/components/microphone.md).

# Microphone

The Avonni Microphone component lets users record audio directly within a Dynamic Component page or Flow. Use it to capture voice notes, meeting summaries, audio feedback, or any other spoken input — with optional file storage as Salesforce ContentDocument objects.

## Overview

The Microphone supports single or multiple recordings, an optional real-time audio visualizer, and flexible file-saving options.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FNnbRkNdYKWjTtlk6xIQM%2Fmicrophone-ready.png?alt=media" alt="The Microphone in its ready state"><figcaption><p>The Microphone before recording starts: the state indicator, the timer, and the <strong>Cancel</strong> and <strong>Start</strong> buttons at their default labels.</p></figcaption></figure>

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FpHbdoOf3T2M0J8wbuMh3%2Fmicrophone-recording.png?alt=media" alt="The Microphone while recording"><figcaption><p>While recording: the indicator turns red, the state label reads <strong>Recording</strong>, the timer runs, and <strong>Start</strong> is replaced by <strong>Pause</strong> and <strong>Done</strong>.</p></figcaption></figure>

Typical use cases include:

* Capture voice notes for customer interactions on Account or Contact pages.
* Record meeting summaries linked to project records.
* Collect audio feedback in support cases or surveys.
* Log verbal instructions for field service tasks.
* Store training session recordings linked to custom objects.

### Supported platforms and limitations

This information applies to the **Avonni Dynamic Components Microphone** component release documented on August 18, 2026. It is not an evergreen compatibility guarantee.

| Context                                                                                 | Recording support                                                                                                                                         |
| --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Salesforce Lightning Experience on a supported desktop browser                          | Supported when the requirements below are met.                                                                                                            |
| Salesforce mobile app                                                                   | Supported for Dynamic Components. The device and embedded webview must meet the media-capture requirements below. Test your mobile deployment thoroughly. |
| Field Service Mobile                                                                    | Not validated or supported for the Microphone component in this release.                                                                                  |
| Other embedded hosts, unsupported browsers, or runtimes without microphone-capture APIs | Unsupported for recording.                                                                                                                                |

#### Requirements

The recorder uses the browser media-capture API, `getUserMedia`. Recording requires:

* A device microphone.
* A secure HTTPS context.
* Microphone access granted by the user and the device or browser.

Organization, browser, operating system, and device-management policies can block the permission prompt or microphone access.

#### When recording cannot start

Recording cannot start when microphone permission is denied, no input device exists, the runtime lacks `getUserMedia`, or the page is not secure.

Grant or restore microphone permission, then retry in a supported host and browser. The component does not provide a recording fallback when media capture is unavailable.

## Configuration

To configure the Microphone, select it on the canvas. The **Edit Microphone** panel opens on the right with three tabs: **Properties**, **Interactions**, and **Style**. The sections below mirror the Properties tab.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FRcGYYecWwMHohOsxw4gF%2Fmicrophone-builder-properties.png?alt=media" alt="The Properties tab of the Edit Microphone panel" width="320"><figcaption><p>The Properties tab with <strong>Save as Content Document</strong> and <strong>Allow Multiple Recordings</strong> both on, so their dependent settings are showing.</p></figcaption></figure>

### Properties

#### Save as Content Document

Enable **Save as Content Document** to allow recordings to be saved as ContentDocument files in Salesforce. When this is on, three additional settings become available:

* **Auto Save Content Document** — When enabled, recordings are automatically saved as a ContentDocument without requiring the user to click a save button. Requires: **Save as Content Document** enabled.
* **Content Document Title** — The title assigned to the saved file. Defaults to `Untitled`. Requires: **Save as Content Document** enabled.
* **Content Document Linked Entity Id** — The record ID to link the saved file to (for example, a Case or Account ID). Requires: **Save as Content Document** enabled.

#### Allow Multiple Recordings

Enable **Allow Multiple Recordings** to let users record several audio clips in a single session instead of just one.

* **Value** — Stores the recorded audio data for a single recording. Available when **Allow Multiple Recordings** is off.
* **Value Collection** — Stores the collection of recorded audio data when multiple recordings are enabled. Available when **Allow Multiple Recordings** is on.

#### Show Visualizer

Enable **Show Visualizer** to display a real-time audio waveform while the user is recording or playing back audio. Disabled by default.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F8eMfITgvI6P7Qs9V1B9T%2Fmicrophone-visualizer.png?alt=media" alt="The Microphone with Show Visualizer off and on"><figcaption><p>Where the visualizer sits, between the state label and the timer.</p></figcaption></figure>

### Labels

The **Labels** section (collapsed by default) lets you customize the text of every UI element in the Microphone. All labels have sensible defaults.

| Setting                   | Default     | Description                                 |
| ------------------------- | ----------- | ------------------------------------------- |
| **Ready Label**           | `Ready`     | Label for the ready state indicator.        |
| **Recording Label**       | `Recording` | Label shown while recording is in progress. |
| **Paused Button Label**   | `Paused`    | Label for the paused state indicator.       |
| **Cancel Button Label**   | `Cancel`    | Label for the cancel button.                |
| **Start Button Label**    | `Start`     | Label for the start recording button.       |
| **Done Button Label**     | `Done`      | Label for the done button.                  |
| **Save Button Label**     | `Save`      | Label for the save button.                  |
| **Delete Button Label**   | `Delete`    | Label for the delete button.                |
| **New Button Label**      | `New`       | Label for the new recording button.         |
| **Rename Button Label**   | `Rename`    | Label for the rename button.                |
| **Pause Button Label**    | `Pause`     | Label for the pause button.                 |
| **Resume Button Label**   | `Resume`    | Label for the resume button.                |
| **Download Button Label** | `Download`  | Label for the download button.              |

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Microphone. Configure them from the **Interactions** tab of the Edit Microphone panel.

### Save As Button Click

Fires when the user clicks the save button on a recording. Use this to react after a recording is saved — for example, show a confirmation toast, navigate to another page, or update a record using the recorded audio value.

## Styling

Configure the Microphone's appearance from the **Style** tab of the Edit Microphone panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the component.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the component's content and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the component's dimensions.

* **Width / Height:** Set fixed dimensions.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
* **Overflow:** Control how content that exceeds the bounds is handled.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the component.

* **Color / Size / Style / Radius:** Set the border color, thickness, style, and corner rounding.
  {% endtab %}

{% tab title="Record Icon" %}
Styles the record indicator.

* **Record Icon Color:** Set the color of the record icon.
  {% endtab %}

{% tab title="Buttons" %}
Styles the recording control buttons — Start, Pause, Resume, Cancel, Done, Save, New, Rename, and Download. Each exposes the same set of hooks.

* **Background Color / Text Color / Border Color:** Set the colors for the default, active, and hover states.
* **Border Size / Border Radius:** Control the button border.
* **Block Start / Block End:** Set the vertical spacing around the button.
  {% endtab %}

{% tab title="Status Labels" %}
Styles the state and timer labels — Ready, Paused, Recording, and Timer. Each exposes the same set of hooks.

* **Color / Font Size / Font Weight / Font Family:** Set the label color and typography.
  {% endtab %}

{% tab title="Visualizer" %}
Styles the audio waveform visualizer.

* **Color:** Set the visualizer color.
  {% endtab %}

{% tab title="Multiple Recordings" %}
Styles the multiple-recordings list (when **Allow Multiple Recordings** is enabled).

* **Border Bottom:** Color / Size / Style of the divider below each recording.
* **Label:** Color / Font Size / Font Weight / Font Family of each recording label.
* **Button Menu:** Background / Icon / Border colors (default, active, hover) plus Border Size / Radius of the per-recording menu.
* **Play Button Icon / Stop Button Icon:** the same color and border hooks for the play and stop controls.
  {% endtab %}
  {% endtabs %}


---

# 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/dynamic-components/components/microphone.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.