Airwave — Free Bootstrap 5 Podcast Website Template
Airwave is a free, bold Bootstrap 5 podcast website template built in-house by uiCookies, with a genuinely working custom audio player written in vanilla JavaScript. It spans two pages — a one-page home and a searchable episode archive — and every episode card feeds a single shared player with play/pause, a seekable waveform scrubber, current and total time, 15-second skip, a speed toggle, and volume. The template is completely jQuery-free, progressively enhanced so all content stays visible without JavaScript, and styled with a distinctive plum-ink, coral, and electric-lime identity rather than a stock Bootstrap look.
Key features
- Custom vanilla-JS audio player: play/pause, seekable waveform, times, 15s skip, speed, volume
- One shared player that every episode card loads into — no page reloads
- Searchable episode archive with live search and format filters
- Rich episode cards: number, artwork, description, date, duration, mini play button
- Bold media design — plum-ink base, signal-coral + electric-lime, Syne display type
- Hero with host avatars and the featured episode preloaded in the player
- About, hosts, featured guests, and listener review sections
- Validated newsletter signup with an inline status message
- 100% vanilla JavaScript — no jQuery, no plugin dependencies
Best for
- Podcasters and audio shows launching a home online
- Independent creators who want a real player, not an embed
- Interview and culture podcasts with a growing back catalogue
- Developers wanting a jQuery-free Bootstrap 5 media base
At a glance
- Bootstrap 5 with no jQuery and no plugin dependencies
- A real, keyboard-accessible custom audio player (not an embed)
- Two pages: one-page home + searchable episode archive
- Vanilla JavaScript: audio player, search/filter, scrollspy, reveals, count-up, form validation
- Progressive enhancement: all content is visible with JavaScript disabled
- Accessible: semantic landmarks, ARIA on the player/slider, visible focus, reduced-motion support
- Self-hosted Bootstrap; Google Fonts (Syne + Space Grotesk); demo audio + images included
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
Does Airwave's audio player actually work, or is it just a design?
It genuinely works. The player is a custom widget written in plain JavaScript, and the template ships with short royalty-free-style sample tracks in the audio/ folder so play, pause, seeking, 15-second skip, speed toggle, and volume all function the moment you open the page. Nothing is faked with static graphics. To use your own show, replace the sample files with your episode audio and update the data attributes on each episode card.
How do episode cards connect to the player?
There is one shared player instance on the page, and every episode card carries data attributes for its title, episode number, guest, artwork, duration, and audio file. Clicking a card's play button loads that episode into the shared player and starts it, then scrolls the player into view. This means visitors never open multiple players or lose their place — the whole page behaves like a single continuous deck.
Is Airwave free for commercial projects?
Yes. Airwave is free and follows the standard uiCookies license, which covers both personal and commercial use. Attribution is appreciated and the exact terms are on the uiCookies license page. What you download is the complete template — there is no locked or paid tier.
Does Airwave use jQuery or any plugins?
No. Airwave is completely jQuery-free and depends on no third-party plugins. The audio player, episode search and filtering, scroll-in reveals, count-up statistics, scrollspy, and newsletter validation are all plain vanilla JavaScript, organised one function per feature. The only bundled library is Bootstrap's own JavaScript for the responsive mobile menu.
Will the site still work if JavaScript is disabled?
The content will. Airwave is progressively enhanced: reveal animations only hide content under a .js class that JavaScript adds, so with scripting off every section, episode, and image stays fully visible. The interactive pieces — the audio player and the archive search — naturally need JavaScript to run, but nothing on the page is left blank or invisible without it.
How do I add or edit episodes?
Each episode is a self-contained article element with data attributes for its number, title, guest, artwork, date, duration, and audio path. Copy an existing episode card, point its data-audio at your file, drop the artwork in the img/ folder, and update the text. On the archive page you also set a data-cat value (interview, deep-dive, or field-notes) so the format filters and search pick it up automatically.
Is the audio player keyboard accessible?
Yes. The waveform scrubber is an ARIA slider you can focus and operate with the keyboard — arrow keys seek, Home and End jump to the start and end, and Space or Enter toggles playback. Every control has an aria-label, focus styles are clearly visible, and the player respects the visitor's reduced-motion preference along with the rest of the template's animations.
What's included in the download, and is it responsive?
You get two HTML pages (the home page and the episode archive), the custom CSS design layer, the vanilla-JavaScript file, self-hosted Bootstrap 5, sample audio tracks, and placeholder images. It is fully responsive and mobile-first, built on the Bootstrap 5 grid with a working collapsible mobile menu, so the layout and the player adapt cleanly from large desktops down to phones. Swap the demo audio and images for your own before going live.
