Audio | Appsmith - SolFind Web Lens

Audio | Appsmith

https://docs.appsmith.com/reference/widgets/audio • 70 KB fetched
Open original page

Audio | Appsmith

Ask AI
Search

Ask Appsmith AI Submit message

Examples How do I install Appsmith using Docker? How do I connect to my local PostgreSQL database? How do I pass inputs from a widget to a query? How do I trigger multiple queries conditionally? How do I fix the error: This value does not evaluate to type Array<Object>?

Try Appsmith

* Get Started

* Introduction

* Build Your First App

* Self Hosting

* New Installation Guides

* Manage Installation

* Upgrade Installation Guides

* Concepts

* Connect Data

* Overview

* How-to Guides

* Reference

* Datasources

* Query Settings

* Concepts

* Build Apps

* Overview

* Quickstart

* How-to Guides

* Reference

* Widgets

* Audio

* Audio Recorder

* Button

* Button Group

* Camera

* Card

* Category Slider

* Chart

* Checkbox

* Checkbox Group

* Code Scanner

* Container

* Currency Input

* Custom

* Datepicker

* Divider

* Document Viewer

* Form

* Filepicker

* Icon Button

* Iframe

* Image

* Input

* JSON Form

* List

* Map

* Map Chart

* Menu Button

* Modal

* MultiSelect

* Multi TreeSelect

* Number Slider

* Phone Input

* Progress

* Radio Group

* Range Slider

* Rating

* Rich Text Editor

* Select

* Stats Box

* Switch

* Switch Group

* Tabs

* Table

* Text

* TreeSelect

* Video

* Accessibility

* Theme

* Sample Apps

* Write Code

* Overview

* How-to Guides

* Reference

* Global Objects

* Global Functions

* JS Libraries

* Fetch API

* Data Transformation

* JavaScript Settings

* Concepts

* Best Practices

* Manage Apps and Users

* Authentication

* Granular Access Control

* Versioning with Git

* Setup SCIM Provisioning

* Embed Appsmith

* Migrate Applications

* Audit Logs

* Branding

* External Client Portal

* Packages

* Overview

* Tutorial

* How-to Guides

* Reference

* Package Version Control

* GIT Apps with Packages Best Practices

* Code Packages

* UI Packages

* Workflows

* Overview

* Tutorial

* How-to Guides

* Reference

* Workflow Triggers

* Workflow Queries

* Workflow Functions

* Pass Parameters to Workflows

* Run History

* Troubleshooting

* Overview

* Self-hosting Errors

* Application Errors

* Product

* FAQ

* Security

* Telemetry

* Support at Appsmith

* Privacy Policy

* Release Notes

* Contribute

* Build Apps

* Reference

* Widgets

* Audio
On this page
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 )

Was this page helpful?

Edit this page

Previous
Widgets
Next
Audio Recorder

* Content properties
* Data

* General

* Events

* Reference properties

* Methods

Audio | Appsmith

Links found on this page