Skip to main content

Audio Recorder

The Audio recorder widget allows users to record using their microphone, listen to its playback and export the data to a data source.

How to use Audio Recorder widget

Properties

Properties allow you to edit the widget, connect it with other widgets and customize the user actions.

Widget Properties

These properties allow you to edit the Audio Recorder widget. All of these properties are present in the property pane of the widget. The following table lists all the widget properties.

Widget PropertyDescription
DisabledMakes the widget un-clickable or unusable. The widget will remain visible to the user but user interaction will not be allowed.
VisibleControls widget's visibility on the page. When turned off: The widget will not be visible when the app is published. It appears translucent when in Edit mode.
Animate LoadingWhen turned off, the widget will load without any skeletal animation. You can use a toggle switch to turn it on/off. You can also turn it off/on using javascript by clicking the JS label next to it.

Binding Properties

These properties allow you to bind your Audio Recorder widget with any other widget in queries or JS objects. The following table lists all the binding properties.

Binding PropertyDescription
blobURLBlob URL of the audio, used to store the audio for future use.
dataURLData URL format (Base64) of the audio, used to embed it inline within different applications.
rawBinaryThe audio file in binary format, used to store the audio for future use.
isVisibleReflects the state of the widget's Visible setting (bool).

Events

You can define functions that will be called when these events are triggered in the widget.

EventDescription
onRecordingStartSets an action to be executed when recording starts. See a list of supported actions.
onRecordingCompleteSets an action to be executed when recording ends. See a list of supported actions.

Styles

Style properties allow you to change the look and feel of the widget.

Style PropertyDescription
Button ColorSets the color of the widget's button. With JS enabled, accepts valid CSS-sytnax color values (string).
Border RadiusRounds the corners of the widget's outer edge. With JS enabled, this accepts valid CSS border-radius values.
Box ShadowCasts a drop shadow from the frame of the widget. With JS enabled, this accepts valid CSS box-shadow values.
Icon ColorSets the color of the widget's Icon. With JS enabled, accepts valid CSS-sytnax color values (string).