Audio Player Bubble Native Mobile - Instructions
This plugin adds a customizable native-style audio player to Bubble Mobile apps. It is built for Bubble Mobile and works through the new React Native Plugin Editor environment. Add the element to your mobile page, configure the fields, and use states, events and actions to control playback and build workflows.
1. Basic Setup1. 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 Sourceaudio_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.mp3Bubble file URLs that start with // are supported. The plugin automatically normalizes them to https:// so they can be played correctly on mobile.
3. Track Metadatatrack_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.mp3track_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.jpgEach comma-separated item is matched by position. The first track name belongs to the first audio URL, the second track name belongs to the second audio URL, and so on.
4. Playback Fieldsautoplay 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 Fieldsshow_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 RuleIf
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 Fieldsbg_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 BarThe progress bar is interactive. Users can tap or drag the progress bar to move to a different part of the audio. When the user sets a new time, the plugin starts playback from that position.
8. StatesUse 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. EventsUse 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. Actionstoggle_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 ExamplesPlay 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 NotesThis plugin is for Bubble Mobile. It does not use HTML, DOM, jQuery, document.getElementById, querySelector or direct access to other Bubble elements. If you want to control playback externally, use the provided Actions. If you want to react to playback changes, use the provided States and Events.
For best results, use direct audio URLs in formats supported by mobile devices, such as MP3. Make sure the audio file is publicly accessible and served over HTTPS.
Built on Bubble
