Skip to main content

Audio

This page provides information on using the Audio widget to play MP3, WAV, OGG audio files. It also supports URLs from YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion.

Using the Audio Widget

Content properties​

These properties are customizable options present in the property pane of the widget, allowing users to modify the widget according to their preferences.

Data​

URL string​

Allows you to set the audio source to be played. It supports various formats such as MP3, WAV, and OGG.

Example:

https://assets.appsmith.com/widgets/birds_chirping.mp3

You can display dynamic data by binding the response from a query or a JavaScript function to the URL property. For instance, if you have a table with a column containing audio URLs, clicking on a specific row plays the corresponding audio:

Example:

{{Table1.selectedRow.audioURL}}

General​

Auto Play boolean​

Enables the audio to play automatically on page load, without requiring any action from the user. Default value is false.

Visible boolean​

Controls the visibility of the widget. If you turn off this property, the widget would not be visible in View Mode. Additionally, you can use JavaScript by clicking on JS next to the Visible property to conditionally control the widget's visibility. The default value for the property is true.

For example, if you want to make the widget visible only when the user selects "Yes" from a Select widget, you can use the following JavaScript expression:

{{Select1.selectedOptionValue === "Yes"}}

Animate Loading boolean​

This property controls whether the widget is displayed with a loading animation. When enabled, the widget shows a skeletal animation during the loading process. Additionally, you can control it through JavaScript by clicking on the JS next to the property. The default value for the property is true.

Events​

When the event is triggered, these event handlers can execute queries, JS functions, or other supported actions.

onPlay​

Specifies the action to be executed when the audio starts playing.

onPause​

Specifies the action to be performed when the audio is paused.

onEnd​

Specifies the action to be taken when the audio playback is completed.

Reference properties​

Reference properties are properties that are not available in the property pane but can be accessed using the dot operator in other widgets or JavaScript functions. They provide additional information or allow interaction with the widget programmatically. For instance, to get the visibility status, you can use Audio1.isVisible.

autoPlay boolean​

Indicates the current state of the widget's Auto Play setting.

Example:

{{Audio1.autoPlay}}

playState string​

Indicates the current state of the Audio widget's sound playback. It is represented by a string with values:

  • PLAYING: Indicates that the audio is currently playing.
  • NOT_STARTED: Represents the state when the audio has not started playing yet.
  • PAUSED: Indicates that the audio is paused.
  • ENDED: Represents the state when the audio playback has ended.

Example:

{{Audio1.playState}}

playing boolean​

Indicates the current playing state of the widget. When the value is true, it means the audio is playing.

Example:

{{Audio1.playing}}

Methods​

Widget property setters enable you to modify the values of widget properties at runtime, eliminating the need to manually update properties in the editor.

These methods are asynchronous and return a Promise. You can use the .then() block to ensure execution and sequencing of subsequent lines of code in Appsmith.

setPlaying (param: boolean): Promise​

Updates the playing state of the Audio widget. When the setPlaying method is called with true, the audio starts playing, and when called with false, the audio stops playing.

Example:

Audio1.setPlaying(true)

setURL (param: string): Promise​

Updates the URL of the audio to be played in the audio widget. Provide the desired URL as a string parameter to the setURL method.

Example:

Audio1.setURL('<https://example.com/audio.mp3>')

setVisibility (param: boolean): Promise​

Updates the visibility of the Audio widget.

Example:

Audio1.setVisibility(true)