> 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/lwc-components/core-components/microphone.md).
# Microphone
`avonni-microphone`
Records audio from the user's microphone, with playback and download controls.
## Overview
**Microphone** is a Lightning Web Component that lets users record, play back, and save audio directly in the browser, with optional saving to Salesforce as a content document.
Use it in your own Lightning Web Components to capture voice memos, notes, or audio attachments. You control the button labels, the recording status text, a live visualizer, multiple-recording support, and whether the audio is saved as a content document—all through the component's attributes.
### Use Cases
* **Voice memos:** Let users attach a quick spoken note to a record.
* **Audio feedback:** Capture audio comments in a custom form or survey.
* **Field notes:** Record observations in the field and save them to a record.
* **Multiple takes:** Allow several recordings in one session with `allow-multiple-recordings`.
* **Content document storage:** Save recordings to Salesforce files and link them to a record.
***
## Use Case Examples
### Example 1: Quick voice memo with a visualizer
**Scenario:** Capture a single voice memo with a live visualizer and custom status labels.
```html
```
```js
// voiceMemo.js
import { LightningElement } from 'lwc';
export default class VoiceMemo extends LightningElement {
handleSave() {
// The user saved the current recording
}
}
```
**Result:** A microphone control showing "Ready to record", a live visualizer while recording, and a save action that fires `save`.
### Example 2: Save recordings to Salesforce files
**Scenario:** Let users record multiple audio files and save them as content documents linked to the current record.
```html
```
```js
// recordAudio.js
import { LightningElement, api } from 'lwc';
export default class RecordAudio extends LightningElement {
@api recordId;
handleSuccess(event) {
const message = event.detail.message;
}
handleError(event) {
const message = event.detail.message;
}
}
```
**Result:** Multiple recordings are saved as Salesforce files linked to the record; `success` or `error` fires with a message after each save.
***
## Specifications
### Attributes
| Name | Description | Type | Default | Required |
| ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------- | -------- |
| `allow-multiple-recordings` | If present, the user can record multiple audio files. | Boolean | `false` | |
| `auto-save-content-document` | If present, the component will automatically save the content document. | Boolean | `false` | |
| `cancel-button-label` | Label of the cancel button. | String | `"Cancel"` | |
| `content-document-linked-entity-id` | ID of the entity to link the content document to on save. | String | — | |
| `delete-button-label` | Label of the delete button. | String | `"Delete"` | |
| `document-title` | Title of the saved document. | String | `"Untitled"` | |
| `done-button-label` | Label of the done button. | String | `"Done"` | |
| `download-button-label` | Label of the download button. | String | `"Download"` | |
| `new-button-label` | Label of the new button. | String | `"New"` | |
| `pause-button-label` | Label of the pause button. | String | `"Pause"` | |
| `paused-label` | Label of the paused status. | String | `"Paused"` | |
| `ready-label` | Label of the ready status. | String | `"Ready"` | |
| `recording-label` | Label of the recording status. | String | `"Recording"` | |
| `rename-button-label` | Label of the rename button. | String | `"Rename"` | |
| `resume-button-label` | Label of the resume button. | String | `"Resume"` | |
| `save-as-content-document` | If present, the component will save the audio as a content document. | Boolean | `false` | |
| `save-button-label` | Label of the save button. | String | `"Save"` | |
| `show-visualizer` | If present, the component will show the visualizer. | Boolean | `false` | |
| `start-button-label` | Label of the start button. | String | `"Start"` | |
| `value` | Value of the component. If `save-as-content-document` is true, the value provided is an array of content document IDs. If `save-as-content-document` is false, the value provided is an array of base64 strings. | string\[] | — | |
### Custom Events
#### `saveasbuttonclick`
The event fired when the save as button is clicked.
The `saveasbuttonclick` event doesn't return any parameters.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `valuechange`
The event fired when the value changes.
The `valuechange` event returns the following parameters.
| Parameter | Type | Description |
| --------- | --------- | ----------------------- |
| `value` | string\[] | Value of the component. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
## Key Considerations
* **Browser permission:** The component requires microphone access; the browser prompts the user before recording can begin.
* **Value format:** `value` holds content document IDs when `save-as-content-document` is true, otherwise base64 strings.
* **Linking documents:** Set `content-document-linked-entity-id` to attach saved files to a specific record.
* **Auto-save:** With `auto-save-content-document`, recordings persist without an extra save step.
* **Best Practice:** When saving to Salesforce, set `save-as-content-document` along with `content-document-linked-entity-id` so recordings are linked to the right record, and provide a meaningful `document-title`.
***
## Troubleshooting Common Issues
* **Recording won't start:** Confirm the user granted microphone permission and the page is served over HTTPS.
* **File not saved to Salesforce:** Verify `save-as-content-document` is present and `content-document-linked-entity-id` is a valid record ID.
* **No save feedback:** Wire the `onsuccess` and `onerror` handlers to read the `message` from `event.detail`.
* **If issues persist:** Contact our support team at 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/lwc-components/core-components/microphone.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.