Contents

Cancel

Recommended Articles

  1. unify-apps

    Indexing

    Unify AI

    Transform raw content into searchable knowledge through AI-powered indexing and vector embeddings

  2. unify-apps

    Snowflake as Destination

    Unify Data

    Load and transform your data seamlessly into Snowflake's cloud data warehouse with UnifyApps' native connectivity and flexible staging options.

  3. unify-apps

    Quentn

    Unify Integrations

    Integrate your app with Quentn to automate marketing campaigns, manage contacts, and optimize customer engagement.

  4. unify-apps

    Connector SDK

    Platform Tools

    Create custom connectors within the Unify platform to unify workflows

  5. unify-apps

    JobNimbus

    Unify Integrations

    Integrate your application with JobNimbus to manage leads, track jobs, and streamline your workflow processes efficiently

  6. unify-apps

    IMAP

    Unify Integrations

    Integrate your app with IMAP to enable seamless email synchronization, real-time access, and enhanced communication workflows.

  7. unify-apps

    Basin

    Unify Integrations

    Basin transforms form handling from a backend headache into a simple integration—capture submissions, trigger automations, and manage data flows without touching server code, giving you more time to build what matters

  8. unify-apps

    Preview Your Work

    Unify Automations

    Effortlessly review & monitor your automation’s performance

  9. unify-apps

    QuickBooks

    Unify Integrations

    Integrate your app with QuickBooks to streamline accounting, automate invoicing, and manage finances effortlessly

  10. unify-apps

    FTP/FTPS

    Unify Integrations

    Connect your app with FTP/FTPS to automate secure file transfers and streamline data exchange across systems.

  11. unify-apps

    Data-Sync by Avoid Duplicate Operations Setting

    Unify Data

    Prevent infinite loops in bidirectional data synchronization by creating record hashes that ensure one-way data flow across connected systems.

  12. unify-apps

    Filters

    Unify Applications

    Enable users to refine, search, and sort data effortlessly across dashboards and datasets

  13. unify-apps

    Insided

    Unify Integrations

    Integrate your app with Insided to enhance customer engagement, streamline community management, and drive self-service support.

  14. unify-apps

    Reverse Polling

    Unify Data

    Reverse Polling technique efficiently retrieves recent data from APIs that return results in chronological order (oldest first), optimizing pagination and data processing strategies when working with time-ordered data sources.

  15. unify-apps

    Facebook Ads

    Unify Integrations

    Connect your app with Facebook Ads to automate campaign management, optimize ad performance, and track marketing success.

  16. unify-apps

    Duplicate Field

    Unify Integrations

    Create independent copies of your data fields to enable multiple mappings while preserving original values for validation and complex workflows.

  17. unify-apps

    Gainsight

    Unify Integrations

    Integrate your app with Gainsight to enhance customer success, automate engagement workflows, and drive retention

  18. unify-apps

    Simplesat

    Unify Integrations

    Integrate your app with Simplesat to collect real-time customer feedback, measure satisfaction, and improve service quality.

  19. unify-apps

    Livestorm

    Unify Integrations

    Integrate your app with Livestorm to streamline webinar hosting, automate event management, and enhance audience engagement.

  20. unify-apps

    Application Connectors

    Unify Data

    Instantly leverage 30+ pre-built application connectors to extract, transform, and load your business-critical data between systems with UnifyApps' no-code integration platform.

Unify Applications
Logo
Add Components to your Interface
Logo
Audio Player

Audio Player

Logo

2 mins READ

Overview

The Audio Player component provides a standardized and interactive way to embed and control audio playback within your application. It allows users to play, pause, seek, and visualize audio content seamlessly. The player can be configured to load audio from a URL, offering flexibility for various use cases such as playing back recordings, podcasts, or instructional audio.

Image
Image

Audio Player Interface

The Audio Player component has two primary states: an initial state when no audio source is provided and an active state when a valid audio source is loaded.

Initial State: Audio Source Missing

When an Audio Player component is first added to your application, it will be in an "Audio Source Missing" state.

Interface Components:

  • Message Display: A central message Audio Source Missing clearly indicates that a valid audio URL needs to be provided.

  • Instruction Text: Subtext guides the user with: Please enter a valid URL to load and play the audio.

Active State: Audio Loaded

Once a valid URL is provided in the URL property, the Audio Player becomes active and displays the audio waveform and playback controls.

Interface Components:

  • Waveform Visualization: A visual representation of the audio file's sound waves, allowing users to see the audio structure.

  • Selection & Zoom: A highlighted section of the waveform indicates the current view, which can be zoomed for detailed inspection.

  • Playback Controls:

    • Play/Pause Button: Toggles the audio playback.

    • Seek Forward/Backward Buttons: Allows users to jump forward or backward in the audio track.

  • Playback Speed: A control (e.g., 1.0x) to adjust the speed of the audio playback.

Configuration Properties

The Audio Player's behaviour and content are managed through the properties panel, which is divided into Content and Appearance tabs.

Content Tab

URL

  • Field Type: Text input.

  • Purpose: To specify the source of the audio file.

  • Requirement: Must be a valid and accessible URL pointing to an audio file (e.g., .mp3, .wav, .ogg).

Mode

  • Manual: The URL is entered directly into the text field.

  • Mapped: The URL is dynamically bound from a data source, such as a database query or an API response. This allows for displaying different audio files based on user interaction or other application logic.

Markers

  • Functionality: Allows you to define specific points of interest within the audio timeline. These markers can be used to trigger events or highlight sections of the audio.

Interactions

Purpose: Configure actions that respond to component events. You can trigger datasources, control other components, or set variables in response to events like onPlay, onPause, or onEnd.