Audio widget allows you to play a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion.
{% embed url="https://youtu.be/FhY6-yUixto" %}
Properties allow you to edit the widget, connect it with other widgets and customize the user actions.
These properties allow you to edit the Audio widget. All of these properties are present in the property pane of the widget. The following table lists all the widget properties.
| Property | Description |
|---|---|
| URL | URL of the audio source to play. |
| Auto Play | Plays audio automatically on page load, without any action from the user. |
| Visible | Controls the 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 Loading | When 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 and writing code that evaluates to a boolean. |
These properties allow you to bind your Audio widget with any other widget in queries or JS objects. The following table lists all the binding properties.
| Binding Property | Description |
|---|---|
| autoPlay | Reflects the state of the widget's Auto Play setting (bool). |
| playState | Shows whether the Audio widget is currently playing sound. Represented by a (string) with value "NOT_STARTED", "PLAYING", "PAUSED", or "ENDED". |
You can define functions that will be called when these events are triggered in the widget.
| Action | Description |
|---|---|
| onPlay | Sets the action to run when the audio begins playing. See a list of supported actions. |
| onPause | Sets the action to run when the audio is paused. See a list of supported actions. |
| onEnd | Sets the action to run when the audio ends. See a list of supported actions. |