Audio bubble
This element handles the display and the play/pause functionality for an individual audio. This element uses the native embed audio element.
Properties
| Name | Type | Description |
|---|---|---|
| src | string | URL of the audio file |
| autoPlay | boolean | When set to true, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading. |
| loop | boolean | When set to true, the audio player will automatically seek back to the start upon reaching the end of the audio. |
| muted | boolean | when set to true, the audio will be initially silenced. |
| audioStyle | AudioBubbleStyle | Styling properties and values of the element |
AudioBubbleStyle
| Name | Description |
|---|---|
| width | Sets the width of the element |
| height | Sets the height of the element |
| border | Sets the border of the element |
| borderRadius | Sets the border radius of the element |
| background | Sets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link |
Usage
- Javascript
import '@cometchat/uikit-elements';//import the web component package.
const audioURL = "https://samplelib.com/lib/preview/mp3/sample-9s.mp3";
//use the element
<cometchat-audio-bubble src={audioURL}></cometchat-audio-bubble>