How to implement an audio player in Bubble.io: Step-by-Step Guide

Go to the Plugins tab and search for audio player. Install a plugin like Audio Player by Zeroqode or BDK Native Audio. If you prefer a code-free approach, you can use Bubble's HTML element with a standard HTML5 audio tag. For the plugin approach, install it and add the Audio Player element to your page from the Element Palette. For the HTML approach, add an HTML element and enter: <audio id='myPlayer' src='dynamic_url'></audio>. The plugin approach is recommended as it provides more control without writing code.

Go to the Data tab and create a Track data type with fields: title (text), artist (text), album (text), duration (number in seconds), audio_file (file), cover_image (image), track_number (number), playlist (Playlist type if applicable). Upload your audio files via the File Manager or through the app's upload interface. On your player page, set the audio player's source to the current track's audio_file URL. Add a Custom State called current_track (type Track) on the page to track which song is playing.

Add visual elements for your player controls: a Play/Pause toggle button (use an Icon element that switches between play and pause icons based on a Custom State is_playing), Previous and Next buttons, and a volume slider (use a SliderInput element). Create workflows: When Play button is clicked → set is_playing state to yes and trigger the plugin's Play action. When Pause is clicked → set is_playing to no and trigger Pause. For volume, when the SliderInput value changes → set the player's volume. Style the controls in a horizontal row resembling a standard media player.

Add a Group element as the progress bar container (full width, 4-8px height, grey background). Inside it, add another Group as the progress fill (same height, colored background). Set the fill width dynamically using the plugin's current time / track duration * 100 percent. If using the HTML approach, use JavaScript to update a Custom State with the current playback time every second. For seek functionality, add a click event on the container Group: calculate the click position as a percentage of the bar width and set the player's current time to that percentage of the duration.

Above or below the controls, add display elements: an Image element bound to current_track's cover_image, a Text element for current_track's title (large, bold), a Text for current_track's artist, and time displays showing current time / total duration in MM:SS format. For the time format, use a text expression that converts seconds to minutes:seconds (e.g., floor(seconds/60):formatted as 0 + ':' + seconds mod 60:formatted as 00). Update these displays dynamically as the track changes.

Add a Repeating Group below or beside the player showing a list of Tracks. Highlight the currently playing track using a Conditional: When Current cell's Track is page's current_track → background color change. When a user clicks a track in the list, set current_track to the clicked track and start playback. For Next and Previous buttons, find the current track's position in the playlist and navigate to the next or previous item. Create a workflow: Get current_track's track_number, search for Track where track_number = current + 1 and playlist = current playlist. For more advanced audio features like streaming and DRM, RapidDev can assist with custom integrations.