Creating a music player in Bubble involves building a now-playing display with album art and track info, playback controls using an HTML5 audio element, a playlist sidebar with queue management, and shuffle and repeat modes using custom states. This tutorial covers the full standalone music player UI without requiring external services beyond audio file hosting.
Overview: Creating a Music Player in Bubble
This tutorial shows you how to build a standalone music player interface in Bubble. You will create a now-playing display, control playback via an HTML5 audio element, build a playlist sidebar, and add shuffle and repeat functionality.
Prerequisites
- A Bubble app on any plan
- Audio files hosted on a public URL (Bubble file storage, S3, or similar)
- Basic familiarity with HTML elements in Bubble
- Understanding of Bubble custom states
Step-by-step guide
Create the Song and Playlist Data Types
Create the Song and Playlist Data Types
In the Data tab, create a Song Data Type with fields: title (text), artist (text), album (text), album_art (image), audio_url (text — URL to the audio file), duration_seconds (number). Create a Playlist Data Type with fields: name (text), songs (list of Songs), creator (User). Upload audio files to Bubble's file manager or host them externally and store the URLs.
Expected result: Your database stores song metadata and audio file URLs organized into playlists.
Build the now-playing display
Build the now-playing display
Create a fixed-position Group at the bottom of your page (like Spotify's player bar). Inside, add: an Image element for album art bound to a custom state 'current_song' (type: Song), Text elements for the song title and artist name, and a progress bar (a narrow Group with a dynamic width representing playback progress). The progress bar width is calculated as: (current_time / duration_seconds) * 100 percent.
Expected result: A player bar at the bottom of the page shows the currently playing song's artwork, title, and artist.
Embed the HTML5 audio element and control playback
Embed the HTML5 audio element and control playback
Add an HTML element to your page with an <audio> tag. Use JavaScript to control playback. When the current_song custom state changes, update the audio source URL. Add Play/Pause, Previous, and Next icon buttons. Each button triggers a JavaScript action via a Bubble plugin (like Toolbox) or by updating a hidden input that the HTML element watches. Play/Pause toggles the audio playback. Previous and Next change the current_song state to the adjacent song in the playlist.
1<audio id="player" preload="auto">2 <source src="DYNAMIC_AUDIO_URL" type="audio/mpeg">3</audio>4<script>5 var player = document.getElementById('player');6 // Control via Bubble custom states or hidden inputs7</script>Expected result: Audio playback is controlled through buttons that interact with the HTML5 audio element.
Create the playlist sidebar with queue management
Create the playlist sidebar with queue management
Add a sidebar Group containing a Repeating Group of Songs from the current playlist. Each cell shows the song title, artist, duration, and a play button. Clicking a song sets the current_song custom state and starts playback. Highlight the currently playing song with a Conditional: when Current Cell's Song = page's current_song, change the background color. Add drag-to-reorder functionality (using a drag-and-drop plugin) or Up/Down arrows to let users rearrange the queue.
Expected result: A playlist sidebar shows all songs with the current track highlighted and the ability to jump to any song.
Implement shuffle and repeat modes
Implement shuffle and repeat modes
Add custom states: 'is_shuffle' (yes/no) and 'repeat_mode' (text — 'none', 'all', 'one'). Add toggle buttons for each. When the current song ends (detected via the audio element's 'ended' event), check the states: if repeat_mode is 'one', replay the same song. If is_shuffle is yes, pick a random song from the playlist. If repeat_mode is 'all' and the current song is the last, go back to the first. Otherwise, play the next song in order. If repeat_mode is 'none' and it is the last song, stop playback.
Expected result: Shuffle randomizes the next song and repeat modes control what happens when a song ends.
Complete working example
1MUSIC PLAYER ARCHITECTURE2==========================34DATA TYPES:5 Song: title, artist, album, album_art, audio_url, duration_seconds6 Playlist: name, songs (list of Songs), creator78PAGE CUSTOM STATES:9 current_song: Song10 current_playlist: Playlist11 is_playing: yes/no12 is_shuffle: yes/no13 repeat_mode: text (none/all/one)14 current_time: number (seconds)1516PLAYER BAR (fixed bottom):17 Album art | Song title | Artist | Progress bar | Controls18 Controls: Previous | Play/Pause | Next | Shuffle | Repeat1920PLAYBACK LOGIC:21 Play: Set is_playing = yes, trigger audio play22 Pause: Set is_playing = no, trigger audio pause23 Next: Calculate next song based on shuffle/repeat mode24 Previous: Go to previous song or restart current if > 3 sec in2526SONG END LOGIC:27 repeat_mode = 'one': replay current song28 is_shuffle = yes: random song from playlist29 repeat_mode = 'all' + last song: go to first30 repeat_mode = 'none' + last song: stop31 Default: next song in orderCommon mistakes when building a music player in Bubble
Why it's a problem: Hosting large audio files directly in Bubble's file storage
How to avoid: Host audio files on a CDN or dedicated audio hosting service and store only the URL in Bubble
Why it's a problem: Not providing visual feedback for the current playback state
How to avoid: Update the progress bar width and play/pause button icon based on the current playback state
Why it's a problem: Losing playback state when navigating between pages
How to avoid: Use a single-page architecture with custom state navigation, or place the audio player in a reusable element that persists across pages
Best practices
- Host audio files on a CDN for fast streaming and reduced Bubble storage usage
- Use a fixed-position player bar that stays visible while scrolling
- Show a progress bar and current time for clear playback feedback
- Implement shuffle using random selection to avoid predictable patterns
- Highlight the currently playing song in the playlist view
- Handle the audio ended event to automatically advance to the next track
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a music player in Bubble.io with a now-playing bar showing album art and track info, play/pause/skip controls, a playlist sidebar, and shuffle/repeat modes. How should I structure the Data Types and handle audio playback?
Create a music player page with a Song Data Type (title, artist, album_art, audio_url). Build a fixed bottom player bar with album art, track info, and playback controls. Add a playlist sidebar with a Repeating Group of songs. Implement play, pause, next, and previous functionality.
Frequently asked questions
Can I play audio in Bubble without an HTML element?
Bubble has a limited built-in audio element, but for full control over playback (seek, progress tracking, events), an HTML5 audio element gives you much more flexibility.
Does the music player work on mobile?
Yes, but mobile browsers may require user interaction before audio can play. Add a visible play button that the user must tap to start playback.
Can I stream audio from Spotify or Apple Music?
Streaming copyrighted music requires licensing agreements. You can display metadata via their APIs but cannot stream their audio content. Use only audio files you have rights to.
How do I add a volume control?
Add a range input (slider) in an HTML element. Use JavaScript to set the audio element's volume property (0.0 to 1.0) based on the slider value.
Can RapidDev help build a music player in Bubble?
Yes. RapidDev can build custom audio players with streaming, playlist management, shuffle/repeat modes, and mobile-optimized playback for your Bubble app.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation