Waveform — Free DJ / Producer / Label Website Template
Waveform is built for the club end of music: an independent electronic label, its residents, and the nights they play. Where most music templates chase a warm indie-band look, Waveform commits to a blue-black club aesthetic with a signature animated CSS waveform player, a catalogue-style discography, and a playable mix series — no images or fonts required for the interaction to work.
Features
- Dark hero with a working CSS waveform/equalizer bar and a play/pause toggle — pure CSS animation, zero audio libraries
- Discography grid with catalogue numbers, formats (vinyl / digital), price tags and hover-to-play overlays
- "Sessions" mix series list with per-row play toggles, live equalizer bars and BPM / genre metadata
- Tour-dates list with sold-out, few-left and on-sale ticket states
- Label roster cards using clean pravatar headshots inside gradient rings
- Booking enquiry form with native validation and a front-end success state
- Scrolling genre marquee, socials band over a club photo, and a rich four-column footer
- Bootstrap 5, self-hosted; all icons are inline SVG so nothing is blocked on strict-CSP hosts
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 — there is no build step and no dependencies to install. Replace the demo text and images with your own, point any forms at your backend or a form service, and deploy the folder to any static host. Colours, fonts, and spacing live in css/style.css; the interactions are in js/main.js. Bootstrap 5 is bundled locally, so it works offline and on strict-CSP hosts.
FAQ
Is Waveform really free for commercial projects?
Yes. Use it for personal or commercial work, including client and label sites. Attribution is appreciated but not required.
Does the waveform player actually play audio?
The player and the mix toggles are front-end demos — the animated waveform, play/pause states and equalizer bars are pure CSS and JavaScript. Drop in a SoundCloud, Bandcamp or `<audio>` embed to make them play real tracks.
Will it work on a strict-CSP host?
Yes. Bootstrap and its JS bundle are self-hosted, every icon is inline SVG, and the only external request is Google Fonts. There are no icon fonts, no jQuery and no CDN scripts to be blocked.
How do I change the releases, mixes and dates?
Everything is plain HTML — each release, session, tour date and roster member is a small, clearly-commented block you can copy, edit or delete. Swap the images in `img/` for your own artwork and headshots.
