A radio station website that actually plays radio

Avava Online is a complete website for an internet radio station, built with plain HTML, CSS and JavaScript. There is no framework to learn, no build step to run and no database to install: upload the folder, put your stream address into one file, and your station is on air.

Most radio templates give you a play button. Avava Online gives you a working FM tuner with a dial you can drag, a needle that scans the band with real tuning noise, two VU meters that move with the actual signal of your stream, and an eight-band equaliser that shapes the sound in the listener's browser. It is the kind of thing people stop and play with — and that is exactly what keeps them on your site.

Two radios, one site

The header player is your station. It sits on every page under the headline and keeps playing while a visitor reads your blog, browses the schedule or opens a podcast — internal links swap the page content without reloading, so the stream never drops. A Listen live button in the top menu turns into Pause while the tuner plays, so listeners can stop and restart the music from any page.

The tuner on the home page is a second, independent radio with its own list of channels. Each station has a frequency on the dial, artwork, a genre line and a live "now playing" text. Drag the needle by hand, or press the arrows and watch it scan from station to station. Between stations the display shows Tuning… — like a real receiver.

Fourteen pages, every one of them finished

• Home — ticker, headline, header player, the tuner, channel cards, today's schedule, hosts, track log, podcasts, request form
• About — the story of the station, the studio, the team, partners
• Stations — every channel with artwork and a play button
• Shows — formats and regular programmes with an on-air strip that fills as the recording plays
• DJs — portraits, shows and a booth table with playback per row
• Schedule — today's grid and the week ahead; the slot on air right now is highlighted against the visitor's clock
• Podcasts — series, the latest episode with a full player, episode list, transcript, guests
• Archive — search with filters, a heat map of the year, the full table of recordings, download block
• Blog and Blog post — index with featured post, single article with author box, related posts and comments
• Contact — studio address, form, phone numbers and a real map with the studio pinned to the address
• Donate — support tiers, progress bar, supporters list
• Privacy and Terms — ready legal pages with contents list and cookie table

No page is a placeholder. Each one carries its own layout, its own content and its own working parts.

Edit content, not code

Stations, schedule, hosts, podcast episodes, the track log and the archive tables live in JSON files inside assets/data/. Adding a station means copying five lines and changing the name, the frequency and the stream address. Changing the schedule means editing a list of times and titles. You never have to open the HTML to update what your station broadcasts.

Every data file starts with a comment explaining what it does and which page it feeds.

Live "now playing"

Icecast and Shoutcast announce the current track inside the stream. A small optional PHP script reads it on the server and shows artist and title next to the player — no API key, no third-party service, no request limits. On hosting without PHP the template simply shows the fallback line written into each station, and nothing looks broken.

Technical details

• Plain HTML5, CSS3 and vanilla JavaScript — no jQuery, no Bootstrap, no npm
• Streams: Icecast, Shoutcast, direct MP3 or AAC addresses
• Web Audio equaliser and VU metering, with a graceful bypass when a stream does not allow cross-origin access
• Responsive layout that folds into a single column on phones, tuner included
• Leaflet map with OpenStreetMap tiles, stored locally — no map key needed
• Every page passes the W3C validator; form fields are labelled, images have alt text, headings are in order
• Favicon, meta descriptions and unique titles on all pages
• Colours, fonts and spacing are CSS variables at the top of one stylesheet
• Google Fonts: Archivo, Bricolage Grotesque, DM Mono, Instrument Serif, Orbitron
• Tested in current Chrome, Firefox, Safari and Edge, desktop and mobile

Images included

All artwork in the template — station covers, host and guest portraits, podcast covers, posters and textures — was generated by us on premium AI accounts. We hold the rights to them, and your purchase includes the right to use them inside this template on your live site, including commercially. Nothing has to be bought or credited separately.

What you get

• 14 HTML pages
• All stylesheets, scripts and data files
• Demo images, audio and video
• The optional PHP "now playing" reader
• Step-by-step documentation with screenshots: installation, adding stations to the player and to the tuner, the equaliser, every page and every data file

Support

If something does not behave the way the documentation describes, write to us through our author profile. We answer within one working day and we fix what needs fixing.