# Audio

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FhGwgMCRsE776pMA5vFbU%2Fimage.png?alt=media&#x26;token=34808a4e-6688-4e3b-80cf-8b147015e3d7" alt=""><figcaption></figcaption></figure>

## Basic

#### Audio Source URI or Base64 String

The source of audio which can be represented either as a Uniform Resource Identifier (URI) or a Base64 encoded string. The URI serves as a pointer to the location of the audio file, such as a website URL or a local file path.

## Interaction

#### Event Handlers

| Event                                        | Description                                                                                                                                                                                                                                                                                                                       |
| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**`Play`**</mark>  | <p>The "Play" event is activated when the user starts to play the audio file.<br><br><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fk0rNqRabwtlnZUR7isaY%2Fimage.png?alt=media&#x26;token=7e40344a-d1a9-4751-b646-1668af859a20" alt=""></p>     |
| <mark style="color:blue;">**`Pause`**</mark> | <p>This event is triggered when the user presses the pause control on the widget.<br><br><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fl4O3389LPsSsYUMa4rh0%2Fimage.png?alt=media&#x26;token=6efe3aa9-97cd-4cf1-a853-ad58084ffd60" alt=""></p> |
| <mark style="color:blue;">**`Ended`**</mark> | <p>This event occurs when the audio file is done playing the file.<br><br><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fm5spIWGTi2xKe5TcAVlo%2Fimage.png?alt=media&#x26;token=87db5ab2-dcac-48e9-b7fd-8161e599ad97" alt=""></p>                |

#### Hide

This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-4aaa812d0b623487c085a616219a4515138079fb%2Fimage%20(211).png?alt=media" alt="" width="338"><figcaption><p>Set the visibility</p></figcaption></figure>

#### Disabled

Disables the user interaction with the element on the page. It visually indicates that the element is inactive and prevents users from interacting with it when applied. Shows a red-crossed warning symbol and can be customized to disable the widget according to certain conditions using low-code.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-695f356d5e8bc58072102f50922157508eb6122b%2Fimage%20(224).png?alt=media" alt=""><figcaption><p>Read-only</p></figcaption></figure>

#### Autoplay

The autoplay function allows the widget to initiate the audio playback without requiring any manual intervention.

#### Loop

The looping function initiates the continual playback of the audio file. This allows for the repeated playing of the audio without interruptions.

## Style

<table><thead><tr><th width="218" align="center">Property</th><th>Description</th></tr></thead><tbody><tr><td align="center">Background</td><td>Users can change the colour of the calendar background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.</td></tr><tr><td align="center">Border Color</td><td>Set the colour to the border lines. The border lines will be shown only if that is enabled.</td></tr><tr><td align="center">Border Radius</td><td>This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.</td></tr><tr><td align="center">Border Width</td><td>Set the thickness of the border of the widget using this value. It is defined using "px" terms.</td></tr><tr><td align="center">Margin</td><td>This value is set in terms of "px" number which creates the space between the border and the content of the widget.</td></tr><tr><td align="center">Padding</td><td>This value is set in terms of "px" number which creates the space between the border and outer elements.</td></tr></tbody></table>