Waveform — Free DJ / Producer / Label Website Template
Waveform is a free single-page Bootstrap 5 template for electronic labels, DJs and producers, built around a blue-black neon club look with electric-aqua and hot-magenta accents. Its standout is a signature animated CSS waveform player — plus a playable "Sessions" mix series with live equalizer bars — that runs on pure CSS and JavaScript, with no audio libraries required.
Key features
- Animated CSS waveform/equalizer hero player with play/pause toggle
- Zero audio libraries — the player is pure CSS and JavaScript
- Discography grid with catalogue numbers, formats, prices and hover-to-play
- "Sessions" mix list with per-row toggles, EQ bars and BPM/genre tags
- Tour-dates list with sold-out, few-left and on-sale ticket states
- Booking enquiry form with native validation and success state
- Label roster cards with headshots in gradient rings
- Genre marquee, club-photo socials band and four-column footer
- Self-hosted Bootstrap 5 with inline SVG icons — strict-CSP friendly
Best for
- Independent electronic and club music labels
- DJs and producers wanting a one-page site
- Promoters listing residents and tour dates
- Mix series or podcast landing pages
- Vinyl and digital release catalogues
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1
- Responsive: Yes
- Style: Neon club — blue-black with electric aqua and hot-magenta accents
How to use it
Download the ZIP, unzip it, and open index.html — no build step, nothing to install. Edit the text and images, point any forms at your backend or a form service, and deploy the folder to any static host. Colours and fonts live in css/style.css; the interactions are in js/main.js.
Frequently asked questions
Is Waveform really free for commercial projects?
Yes. Waveform is free for both personal and commercial use, including paid client and label sites. Attribution back to the template is appreciated but not required, so there's no licensing step before you launch.
Does the waveform player actually play audio?
No — the hero player, its play/pause states and equalizer bars are a front-end demo built entirely with CSS and JavaScript, so there are no audio libraries to load. To play real tracks, drop a SoundCloud, Bandcamp or native HTML <audio> embed into the player block. The animation is purely visual and won't interfere with whatever you embed.
Can I edit it without knowing how to code or using a build tool?
Yes. Everything is plain, clearly-commented HTML and CSS with no build step, framework compile or npm install required. Each release, session, tour date and roster member is a small self-contained block you can copy, edit or delete, and you preview changes just by opening the file in a browser.
How do I change the colours and fonts?
The look is a blue-black club palette with electric-aqua and hot-magenta accents, all defined in the stylesheet so you can recolour the whole site by editing those values in one place. Fonts load from a single Google Fonts link in the page head — swap it for another family and update the matching CSS to restyle the type.
Is it responsive and mobile-friendly?
Yes. Waveform is built on Bootstrap 5's responsive grid and is designed to adapt from desktop down to phones. The discography grid, sessions list, tour dates and footer reflow for smaller screens without any extra configuration.
Which browsers does it support?
It targets current versions of all modern browsers — Chrome, Firefox, Safari and Edge — which covers the CSS animations behind the waveform and equalizer effects. Very old or unsupported browsers may not render the neon animations, but the content and layout remain accessible.
How do I wire up the booking enquiry form?
The booking form ships with native browser validation and a front-end success state, but it is a static form with no backend attached. To actually receive enquiries, point its action at a form service (such as Formspree or Netlify Forms) or your own endpoint. It does not process payments or store data on its own.
What's included and will it run on a strict-CSP host?
Waveform is a single richly-built page covering hero player, discography, sessions, tour dates, roster, booking and footer, with placeholder artwork and headshots in the img/ folder to swap for your own. Bootstrap and its JS are self-hosted and every icon is inline SVG, so the only external request is Google Fonts — there's no jQuery, no icon fonts and no CDN scripts to be blocked on strict-CSP hosts.
