<audio-recorder>

Allows you to record a short audio clip. The audio is recorded in OGG format using Opus encoding, and is stored in the hidden form field as a Base64-encoded string.

Attributes

• max-length - The maximum length of the audio clip in seconds. The default value is 3 seconds.

Slots

• default slot - The default unnamed slot should hold a hidden input field that will hold the Base64-encoded audio data. If left empty it will be filled with a hidden field named `audio-recorder``, but this will not be visible to any parent form (without using JavaScript).
• record-button-text-record - This slot allows you to customise the text of the record button while stopped. Defaults to Record.
• record-button-text-stop - This slot allows you to customise the text of the record button while recording. Defaults to Stop.
• clear-button-text - This slot allows you to customise the text of the clear recording button. Defaults to ×.

CSS parts

• audio-recorder::part(record-button) - Targets the record / stop <button> part of the component, to allow styling to be applied. An additional class of recording is applied while the component is recording audio. Additionally, a ::before pseudo-element is used to generate the record and stop icons. These can be overridden by using the audio-recorder::part(record-button)::before and audio-recorder::part(record-button).recording::before selectors respectively.
• audio-recorder::part(audio-player) - Targets the native <audio> element used as the media player.
• audio-recorder::part(clear-button) - Targets the clear <button> part of the component, to allow styling to be applied.

Example

Code