How to build a music player in Bubble

The simplest way to build a music player in Bubble is to store each audio file in the database as a file field, place an HTML element or Bubble’s built‑in Audio Player element on the page, and dynamically bind its source to the audio file’s URL. Then you control playback with normal Bubble workflows (play/pause/next) by changing the “Current Track” custom state.

Core Structure

You need three parts: a Track data type, a Repeating Group listing tracks, and a Current Track custom state. The music player displays the currently selected track and updates whenever the user chooses a new one.

• Data type Track: fields like Title (text), Artist (text), Audio File (file), Cover (image)
• Repeating Group: shows all Tracks
• Custom state: on the page, e.g. “current\_track” (type = Track)

Displaying and Playing Audio

Bubble’s Audio element works if you bind the source to “Parent group’s Track’s Audio File”. If you want full control (autoplay when changing track, custom buttons), use an HTML element with a native audio tag whose source updates dynamically.

<audio id="player" controls src="dynamic_value_here"></audio>

Workflows

• When user clicks a track in the Repeating Group → set page custom state “current\_track” to “Current cell’s Track”.
• To auto-play on track change, use a workflow “When current\_track is changed” → run JavaScript to trigger play.

document.getElementById("player").play(); // Plays current audio

Next / Previous Buttons

• Use the list from the Repeating Group’s search.
• Find current_track’s index, then set current_track to item at index+1 or index-1.

Permissions

Set Privacy Rules so only allowed users can access audio files, or store them in private S3 URLs if required.