Music streaming app home screen in dark mode with greeting, recently played grid, made for you playlist row, mini player above the tab bar and a full player bottom sheet.
Also known as: music app ui, music player app home screen, dark music app design, mini player bottom bar, mobile app home screen html
A music streaming app home screen built with Bootstrap 6: a dark HTML mobile template with a time-based greeting, a recently played grid, a "Made for you" playlist row, a mini player above the tab bar and a full player bottom sheet. Use this music app UI for a streaming PWA, a radio or podcast site, or a Capacitor app.
How it works
The root .msh-app is a 430 px dark app column (data-bs-theme="dark").
.msh-top: avatar, icon buttons and a greeting that script.js sets from the visitor's clock.
.msh-chips: Bootstrap 6 .chip filters. Grid items and sections carry data-kind (music, podcast, audiobook) and are hidden when they do not match.
.msh-recent: a two-column grid of .msh-tile buttons. The playing tile gets .is-current and a small equalizer (.msh-eq).
.msh-row: horizontal scroll-snap rows of .msh-card playlists. .msh-cover-label with data-mix adds a coloured title band to the cover.
.msh-dock: a sticky block that holds the mini player (.msh-mini) and the tab bar (.msh-tabs), so both stay at the bottom of the app column.
Every playable element has the class .msh-play-item with data-title, data-artist and data-length (seconds). Tapping one loads it into the mini player and starts a simulated playback timer; tapping the current one pauses it. The mini player opens a Bootstrap 6 Drawer (.msh-player) with a large cover, a Bootstrap 6 Range seek bar and playback controls. Both players stay in sync.
Customization
--msh-green on .msh-app: the accent for chips, likes, the avatar and the equalizer; --msh-bg and --msh-surface set the charcoal tones.
Add a playlist by copying an li in .msh-row and editing data-title, data-artist, data-length and the cover photo.
Change the cover band colour with data-mix (green, amber, blue, rose) or add a new .msh-cover[data-mix] rule.
Seek bar colours use --bs-range-track-fill-bg and --bs-range-thumb-bg on .msh-range.
Replace the setInterval in setPlaying() with an <audio> element or your player SDK to play real audio.
Use cases
Music streaming apps: a home feed with recent plays and personal mixes.
Podcast and audiobook apps: the same grid, filters and mini player.
Internet radio and label sites: featured shows in swipeable rows on a PWA.
Accessibility
All tiles, cards and controls are real buttons with labels. Play buttons switch their aria-label between Play and Pause, like, shuffle and repeat use aria-pressed, and the seek bar has an aria-valuetext such as "1:12 of 3:28". The full player is a native modal <dialog>: focus moves to the play button and Escape closes it. The equalizer animation stops when prefers-reduced-motion is set.
Bootstrap 6 notes
Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). The full player uses the new Drawer instead of Offcanvas, filters use .chip, the seek bar uses the new .form-range wrapper with .form-range-input, and dark mode comes from data-bs-theme="dark" on the root. Photos from Unsplash; replace them with your own cover art.
Can I use the Music Streaming App Home Screen code for free?
Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.
How do I add it to my website?
Load Bootstrap 6 and Bootstrap Icons and fonts.googleapis.com from a CDN (the links are under Requirements).
Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag.
Download HTML gives you a complete page with everything already linked.
Does it need jQuery or a JavaScript framework?
No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.
Can I turn this screen into an iOS or Android app?
Yes. It is plain HTML, CSS and JavaScript, so it works in a mobile website or progressive web app as it is. To ship it as a store app, put it in the web folder of a Capacitor or Cordova project and build it for iOS and Android; replace the sample data with calls to your own API.
How does it look on a desktop screen?
The screen is designed for phones. On wider screens it stays at phone width in the middle of the page, so it still looks like an app. The live demo opens at mobile width; use the Tablet and Desktop buttons to check other sizes.
Requirements
Add these to your page (already included in the download):
Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's
JavaScript load with type="module". Alpha releases can still change before the stable version.
Music Streaming App Home Screen · Bootstrap 6 Mobile Home & Feed
Travel app explore screen with destination search, category chips, featured destination cards in a horizontal scroll, nearby list, bottom sheet details and bottom tab bar.
