Audio

🔊 Audio Component in Lowcoder

The Audio component in Lowcoder allows seamless integration of audio playback functionality into your applications. It supports embedding audio content with playback controls, enhancing user engagement through auditory elements.

🔧 Key Features

• Audio Playback: Embed audio files (e.g., MP3, WAV) with built-in controls for play, pause, and volume adjustment.

• Autoplay and Looping: Configure audio to start automatically and/or loop continuously.

• Responsive Design: Adapts to various screen sizes, ensuring consistent user experience across devices.

• Customizable Styling: Modify appearance to align with your application's design aesthetics.(app.lowcoder.cloud)

🛠 Configuration Options

• Source URL: Specify the path or URL to the audio file you wish to embed.

• Autoplay: Enable or disable automatic playback upon component load.

• Loop: Set the audio to replay automatically after it ends.

• Controls Visibility: Choose whether to display playback controls to the user.

• Muted: Start the audio with sound muted or unmuted.

• Styling: Customize dimensions, borders, and other visual aspects to match your application's design.(docs.lowcoder.cloud)

⚙️ Integration Tips

• Dynamic Source Binding: Utilize Lowcoder's data binding to dynamically set the audio source based on user interactions or data queries.

• Event Handling: Implement event handlers to trigger actions when the audio starts, pauses, or ends.

• Responsive Layout: Combine with layout components to ensure the audio player scales appropriately across devices.

Component Playground

On Component Playground, you can interact with the Audio component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Audio component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Component Auto-Docs

In the Auto-Docs of Audio component, we have shown how to use different properties of the Audio component. It also includes the Styling properties of the Audio component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Properties of the Dropdown components

These properties are accessible in {{ }} notations, as well as in JavaScript Queries.

Property Name	Type	Description
src	String	Returns the Source value of the Audio component
hidden	Boolean	Returns True or False based on whether the Audio component is hidden or not

Events

Events give you the ability to trigger further actions (with Event-Handlers).

Event Name	Description
Play	Triggers, when a User Plays the Audio in Audio component
Pause	Triggers, when a User Pauses the Audio in Audio component
Ended	Triggers, when the Audio has ended

Methods

You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.

seekTo() :

audio1.seekTo() method moves the Audio of the Audio component to the given second of the Audio.

audio1.seekTo(10);

showPreview() :

audio1.showPreview() method shows the Preview of the Audio in the Audio component.

audioo1.showPreview();

📌 Use Cases

• Podcasts and Interviews: Embed audio content for users to listen to directly within the application.

• Language Learning: Provide pronunciation guides or listening exercises.

• Background Music: Enhance user experience with ambient sounds or music.

• Accessibility: Offer audio descriptions or narrations for visually impaired users.