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.

<!-- voiceMemo.html -->
<template>
    <avonni-microphone
        document-title="Voice Memo"
        ready-label="Ready to record"
        recording-label="Recording..."
        show-visualizer
        onsave={handleSave}
    ></avonni-microphone>
</template>

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

<!-- recordAudio.html -->
<template>
    <avonni-microphone
        allow-multiple-recordings
        auto-save-content-document
        content-document-linked-entity-id={recordId}
        document-title="Field Notes"
        save-as-content-document
        onsuccess={handleSuccess}
        onerror={handleError}
    ></avonni-microphone>
</template>

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

error

The event fired when an error occurs while saving the audio file.

The error event returns the following parameters.

Parameter	Type	Description
message	string	The error message.

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.

save

The event fired when the user clicks the save button.

The save 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.

success

The event fired when the audio file is successfully saved.

The success event returns the following parameters.

Parameter	Type	Description
message	string	The success message.

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.

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.

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 [email protected] for assistance.