Solmusic

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

SolMusic is a music streaming website template for services, labels and artists that want to connect musicians with listeners. It is built on Bootstrap 5, and the layout is responsive and works on phones, tablets and desktops. It comes with six pages: home, artist, category, playlist, blog and contact.

The home page has a hero slider, a how-it-works section, an about section, subscription plans and a premium features section, with a drop-down menu in the header. The artist page has a track player with a waveform, song details, the artist’s bio and similar songs; the category page lists live concerts and tracks with their own players; the playlist page has a filterable grid of playlists with a search; the blog page lists news posts; and the contact page has a contact form and a map. Every track has favourite, download and buy actions, and the Login and Create an account links open demo dialogs. Use SolMusic as it is or adapt it to your own music project.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.3.1 and jQuery), compiled from Sass with the original proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the hero slider, a menu panel that keeps the MENU button replaces SlickNav, a small built-in module filters the playlists, and native audio players replace the old jQuery player and waveform plugins. Lucide SVG icons replace Font Awesome 4.7 and the PNG icons, and the social logos come from a small Font Awesome Brands subset (the Twitter bird is now the X logo). npm run build (Dart Sass and esbuild) compiles the minified stylesheets and one script.
• Lighter pages: the artist page went from 2.31 MB and 42 requests to 54 KB and 26 requests, because its waveform is now drawn in advance instead of being built from the whole track in the browser, and the contact page went from 2.24 MB and 55 requests to 72 KB and 10 requests. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the first screen, and the download shrank from 29.57 MB to 3.70 MB.
• No third-party requests: Montserrat is self-hosted, the map on the contact page is OpenStreetMap and loads only after a click, with no API key to set up, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its web font from Google Fonts and the contact page loaded a Google Maps embed.
• Working players: the track players on the artist and category pages play, pause, seek by click or arrow keys, rewind, fast-forward and stop, one track at a time, and the waveform on the artist page shows progress and seeks on click. Eight short demo tracks with fictional titles are included, so every player works out of the box. Each track has a favourite button that the browser remembers, a download link and a buy link to the plans, and the concert cards play their track.
• Working forms and filters: the contact form sends through a PHP handler, using a safe mailer with validation, a spam trap and an in-page message (before, it had no action and its fields had no names). The playlist filter and the playlist search work, the category tabs open the playlist page already filtered, and the Login and Create an account links open a demo dialog with log-in and sign-up forms and inline errors.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, labelled form fields and player controls, a seek bar you can use from the keyboard, a Pages submenu that opens from the keyboard and on touch screens, visible keyboard focus everywhere (the earlier release removed it), 44 px slider dots, reduced-motion support and WCAG AA text contrast, with white button labels on a deeper pink, lighter and darker pinks for text on navy and white, and darker greys for the footer, post details and track times.
• Fixed: the Home and logo links on the artist page were broken, and 185 links went nowhere; they all open real pages or sections now, and the dead pagination numbers on the blog and category pages are gone. The hero text now shows without JavaScript, the full-page preloader that hid the page is removed, and the placeholder Latin, repeated cards and typos are replaced with music-streaming copy.