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.