Audio Player Pro for Bubble Mobile

✅

Link to the plugin page: https://zeroqode.com/plugin/audio-player-for-bubble-mobile-1738846526299x289546517852726800

Demo to preview the plugin:

✅

Live Demo: https://zeroqode-native-demo-01.bubbleapps.io/api/1.1/mobile/preview?debug_mode=true&preview_view=audio__player

✅

Bubble Editor: https://bubble.io/page?name=audio__player&preview_view=audio_player&id=zeroqode-native-demo-01&tab=Design&type=page&version=live

Introduction

This audio player plugin is perfect for any mobile app built with Bubble's mobile editor. It features high-quality, interactive audio experience, seamless audio playback with key features such as autoplay, looping, and customizable media information like song title, artist, and artwork as well as intuitive controls for play, pause, seek, mute, and track navigation. With exposed states like current time, duration, and track index, users can track playback progress easily. The plugin supports essential events and actions like play, pause, change track, mute/unmute, and more.

Prerequisites

This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at: https://testflight.apple.com/join/4fXUggud

How to setup

Place Audio Player element and 4 buttons on the page

Configure element with a list of audio files from project’s data base

Configure each button with workflow and condition:

Play Button

Mute Button

Previous Track

Next Track

Basic configuration is ready, preview the page to test

Plugin Element Properties - Audio Player

Fields:

Title	Description	Type
Audio Source	The audio track(s) to be played, provided as a single URL or a comma-separated list of URLs.	Text
Track Names	Track title(s) matching the audio source list, provided as a comma-separated list (first name for first URL, etc.).	Text
Track Artists	Artist name(s) matching the audio source list, provided as a comma-separated list.	Text
Track Artworks	Artwork image URL(s) matching the audio source list, provided as a comma-separated list of URLs.	Text
Loop	Whether the current track should loop when it reaches the end.	Yes/No
Enable Autoplay Audio List	When enabled, automatically plays the next track in the list when the current one ends (wraps to first after the last).	Yes/No
	🎛️ UI Display Control
Display Artwork	Show or hide the track artwork image in the player UI.	Checkbox
Display Title	Show or hide the track title in the player UI.	Checkbox
Display Artist	Show or hide the artist name in the player UI.	Checkbox
Display Controls	Show or hide the main playback controls section (prev / play-pause / next).	Checkbox
Display Previous Button	Show or hide the “previous track” button in the controls.	Checkbox
Display Play Button	Show or hide the central play/pause button in the controls.	Checkbox
Display Next Button	Show or hide the “next track” button in the controls.	Checkbox
Display Progress Bar	Show or hide the progress bar for the current track.	Checkbox
Display Time	Show or hide the current time and duration labels beside the progress bar.	Checkbox
	🎨 Color Customization
Background Color	Background color of the player container (hex or CSS color value).	Color
Primary Color	Main accent color used for key UI elements (e.g. highlights or accents).	Color
Text Color	Color of primary text elements (titles, labels).	Color
Secondary Text Color	Color of secondary text elements (subtitles, time labels, etc.).	Color
Button Color	Background color of the control buttons in their normal state.	Color
Button Hover Color	Background color of the control buttons when hovered over (web).	Color
Progress Bar Color	Fill color of the progress bar indicating current playback position.	Color
Progress Bar Background	Background color of the progress bar track behind the fill.	Color
	📐 Layout & Sizing
Border Radius	Corner radius (in pixels) applied to the player container and artwork (as a number in text form).	Number
Padding	Inner padding (in pixels) around the player content (as a number in text form).	Number
Artwork Size	Base artwork size (in pixels); actual size is responsive but uses this as a maximum.	Number
Storage ID	Unique identifier for this player instance used to persist and restore playback state across navigation. Required when multiple Audio Player elements exist in the same project — each must have a distinct value (e.g. "player_home", "player_podcast"). If left empty, an ID is auto-generated per session, which prevents state conflicts between players but disables cross-navigation state restoration.	Text

Title	Description	Type
Track Index	The index of the track to play.	Number

Title	Description	Type
Time	The time (in seconds) where you want to seek in the audio. Example: 30 (seeks to the 30-second mark)	Text

Title	Description	Type
Track index	1-based index of the track to load from the playlist.	Number
Position	Playback position in seconds to seek to before starting. Pass 0 to play from the beginning.	Number

Title	Description	Type
Play	Indicates whether the audio is currently playing.	Checkbox (yes/no)
Pause	Indicates whether the audio is currently paused.	Checkbox (yes/no)
Current Track Index	The index of the currently playing track in the playlist.	Number
Current Time	The current playback time of the audio, in seconds.	Number
Duration	The total duration of the current audio track, in seconds.	Number
Mute	Indicates whether the audio is muted.	Checkbox (yes/no)
Error Message	A message that contains details about the error encountered during audio playback or operations.	Text

Title	Description
Play	Triggered when the audio starts playing.
Pause	Triggered when the audio is paused.
Ended	Triggered when the audio finishes playing.

Audio Player Pro for Bubble Mobile

Demo to preview the plugin:

Introduction

Prerequisites

How to setup

Play Button

Mute Button

Previous Track

Next Track

Plugin Element Properties - Audio Player

Fields:

Element Actions

Exposed states

Element Events

Changelogs

Update 24.06.26 - Version 1.22.0

Update 15.06.26 - Version 1.21.0

Update 28.05.26 - Version 1.20.0

Update 06.03.26 - Version 1.19.0

Update 24.12.25 - Version 1.18.0

Update 15.12.25 - Version 1.17.0

Update 11.12.25 - Version 1.16.0

Update 01.12.25 - Version 1.15.0

Update 01.12.25 - Version 1.14.0

Update 06.11.25 - Version 1.13.0

Update 05.11.25 - Version 1.12.0

Update 05.11.25 - Version 1.11.0

Update 26.09.25 - Version 1.10.0

Update 26.09.25 - Version 1.9.0

Update 14.08.25 - Version 1.8.0

Update 22.07.25 - Version 1.7.0

Update 19.06.25 - Version 1.6.0

Update 11.06.25 - Version 1.5.0

Update 30.04.25 - Version 1.4.0

Update 30.04.25 - Version 1.3.0

Update 15.04.25 - Version 1.2.0

Update 11.02.25 - Version 1.1.0

Update 06.02.25 - Version 1.0.0