Audio Widget
The audio widget plays a sound file from a URL. It can autoplay a sound without a play button UI or it can display a play/pause button to control the audio playback.
The audio URL can take one of three formats:
- A string URL
- Map of URL candidates
- List of URL candidates
String URL
If it is a simple URL string, that audio file will be played. Any ${var}
references will be expanded at run-time.
url: 'https://example.com/audio/hot-${temp}.mp3',
Map of URLs
If it is a map, the widget value is used as a key to the map to select a corresponding URL. A key of *
will be used if there is no better match.
url: {
sunny: 'https://example.com/audio/sunny.mp3',
cloudy: 'https://example.com/audio/cloudy.mp3',
'*': 'https://example.com/audio/rainy.mp3',
}
List of URLs
If the URL value is a list, the list contains candidate URLs with expressions that are evaluated at run-time to select the best match. For example:
[
{
expression: 'temp > 40',
value: 'https://example.com/audio/hot.mp3',
},
{
expression: true,
value: 'https://example.com/audio/temperate.mp3'
}
]
Auto Play
Autoplay of audio is typically prevented by the browser. To enable, you may need to invoke your browser with a specific flag. For example:
chrome.exe --autoplay-policy=no-user-gesture-required
Configurable components
Class Name | Description |
---|---|
card | Audio widget card component |
primary | Primary audio player component |
Widget Properties
Name | Description |
---|---|
prefix | Optional prefix icon (defaults to "$play" and "$pause") |
text | Play button text (defaults to "Play") |
url | URL string, map or list of URLs |
value | Widget data value used to select the audio from the URL map or list |
Common CSS Properties
Category | CSS Property / Technique | Purpose | Example |
---|
Custom CSS Properties
Name | Description |
---|---|
--w-autoplay | Set to true to autoplay the audio file. Defaults to false. |
--w-duration | Duration to play the audio file. Set to a number of seconds or repeat to loop the audio file. Defaults to no limit |
--w-loop | Set to true to loop the audio file. Defaults to false. |