Audio Player Bubble Native Mobile - Instructions

1. Basic Setup

1. Add the Audio Player element to your Bubble Mobile page.
2. Set the audio_source field with an audio URL.
3. Optionally add track names, artists, albums and cover images.
4. Enable or disable each visual control using the show/hide fields.
5. Customize the colors to match your app design.
6. Preview the mobile page and test playback on the device.

2. Audio Source

audio_source  
Use one audio URL or multiple URLs separated by commas.

Example:

https://example.com/audio-1.mp3, https://example.com/audio-2.mp3, https://example.com/audio-3.mp3


3. Track Metadata

track_names  
Comma-separated track names.

track_artists  
Comma-separated artist names.

track_albums  
Comma-separated album names.

track_img  
Comma-separated cover image URLs.

Example:

audio_source  
https://example.com/song-1.mp3, https://example.com/song-2.mp3

track_names  
Song One, Song Two

track_artists  
Artist One, Artist Two

track_albums  
Album One, Album Two

track_img  
https://example.com/cover-1.jpg, https://example.com/cover-2.jpg


4. Playback Fields

autoplay  
If yes, the first track starts playing automatically when the page loads.

loop  
If yes, the current track repeats. When loop is active, pressing next restarts the current track instead of advancing.

random  
If yes, the next track is selected randomly when moving forward or when a track ends.

5. Visibility Fields

show_image  
Shows or hides the cover image.

show_title  
Shows or hides the track title.

show_artist  
Shows or hides the artist name.

show_album  
Shows or hides the album name.

show_controls  
Shows or hides the main controls container.

show_previous_button  
Shows or hides the previous button.

show_next_button  
Shows or hides the next button.

show_play_button  
Shows or hides the play/pause button.

show_progress_bar  
Shows or hides the progress bar.

show_time  
Shows or hides the current and remaining time.

show_random_button  
Shows or hides the random button.

show_loop_button  
Shows or hides the loop button.

show_volume_button  
Shows or hides the mute/unmute button.

Artist and Album Display Rule

If show_artist is yes and show_album is yes, the plugin displays:

Artist, Album

If show_artist is yes and show_album is no, it displays only:

Artist

If show_artist is no and show_album is yes, it displays only:

Album

If both are no, neither artist nor album is shown.

6. Style Fields

bg_color  
Background color of the player.

buttons_color  
Main button color and regular icon color.

icons_color  
Icon color inside the play/pause circle.

bg_icons_when_active  
Color used when random, loop or mute is active.

progress_bar_color  
Progress fill color, progress handle color, current time color and remaining time color.

volume_bar_color  
Reserved for volume styling.

title_color  
Track title color.

track_album_color  
Artist and album text color.

7. Progress Bar


8. States

Use these states in Bubble workflows, conditions and UI logic:

is_playing  
Returns yes when audio is playing.

is_paused  
Returns yes when audio is paused.

is_muted  
Returns yes when muted or when volume is 0.

current_track_index  
Current track number. This is 1-based, so the first track is 1.

current_time  
Current playback time in seconds.

duration  
Audio duration in seconds.

volume  
Current volume from 0 to 1.

error_message  
English error message if playback fails or no audio library is available.

9. Events

Use these events to trigger Bubble workflows:

is_playing  
Triggered when playback starts.

is_paused  
Triggered when playback pauses or stops.

is_muted  
Triggered when the user mutes the audio.

forward  
Triggered when the next button is used.

previous  
Triggered when the previous button is used.

10. Actions

toggle_play  
If the audio is playing, it pauses. If the audio is paused, it plays. States are updated automatically.

toggle_mute  
Mutes or unmutes the player. States are updated automatically.

set_volume  
Field: volume  
Type: number  
Accepted range: 0 to 1  
Example: 0.5 means 50% volume.

set_time  
Field: time  
Type: number  
Accepted range: 0 to duration  
The value is in seconds. This action sets the current time and starts playback.

change_track  
Field: track_index  
Type: number  
This uses a 1-based index. Use 1 for the first track, 2 for the second track, etc. The selected track starts playing automatically.

11. Common Examples

Play or pause from a custom Bubble button  
Use the action toggle_play.

Jump to 30 seconds  
Use set_time with time = 30.

Set volume to 80%  
Use set_volume with volume = 0.8.

Play the third track  
Use change_track with track_index = 3.

Show only album, without artist  
Set show_artist = no and show_album = yes.

12. Important Notes