How to embed a player on your radio station's website

Why a player on your own site matters

You've got your internet radio station running with RadioCult and now comes the step that actually grows an audience: making it effortless for people to press play the moment they land on your site.

Listening has moved online, and that is exactly where an embedded player earns its keep. In the third quarter of 2024, online listening accounted for 28% of all UK radio listening, with websites and apps alone making up 11% of the total, and 74% of all weekly listening hours were consumed on a digital platform (RAJAR, Q3 2024 data release). Online radio now reaches around three in ten UK adults every week, and the share of listening time going to online live radio has more than doubled in five years, from 5% to 11% (Ofcom, Media Nations 2024).

Your mobile app covers listeners on the move, but your website is where people arrive from search, social, and word of mouth. If the first thing they see is a working play button, you have converted a visitor into a listener. If they have to hunt for a link or leave for another platform, most will not bother. This guide walks through your embed options, where to place the player, how to handle mobile, and the mistakes that trip stations up.

Your two embed options

There are really two routes, and the right one depends on how much control you need.

• A ready-made embed (recommended for most stations). RadioCult's Radio CMS and embeddable components give you a themeable web player as a copy and paste HTML iframe. No build step, no maintenance, and it works anywhere.
• A custom player built against the API. If you need the player to match your brand down to the last pixel, RadioCult ships a documented API you can build against, driving your own HTML audio element and your own now-playing display.

Unless you are set on a bespoke development project, start with the iframe embed. You can always graduate to a custom build later, and nothing stops you running the quick embed while you design something more ambitious.

The RadioCult player embed

Getting your station live with a RadioCult player embed is genuinely a copy and paste job. If you are an existing customer, head to the Player Embed page on the platform. If you are still evaluating, take a look at the embeddable components overview first.

On the embed page you will see an interactive preview of your player. Adjust the theme options and the preview updates instantly, and the HTML snippet beneath it updates in real time to match. That snippet is what you paste into your site.

Because the embeds are plain HTML iframes, they run on any tech stack, whether you use a website builder like Wix or Squarespace, a CMS like WordPress, or a site you hand-rolled in React or Vue.

Website builders (Squarespace, Wix)

Embeds shine on builder platforms, where you rarely get to touch raw code elsewhere. Here is the Squarespace flow:

1. In the section where you want the player, click the plus icon to add a new block.

2. Choose the "code" block option.

3. Paste the player embed code from RadioCult into the block. You may need to nudge the width and height of the iframe so it sits neatly within your layout.

Wix follows the same idea using its Embed HTML or iFrame element.

WordPress

WordPress is just as quick:

1. Click the plus icon to add a new block.

2. Search for "code" and select "Custom HTML".

3. Paste the player embed code into the block, adjusting the width and height if needed.

Custom sites (React, Vue, Svelte, plain HTML)

If you built your own site, you already know how HTML works, so this is the easiest case of all. Paste the iframe snippet into the right spot in your markup. In JSX you may need to tweak a couple of attribute names to the framework's conventions, for example using allow and camelCased props where React expects them.

Do not stop at the player

A lone play button answers "can I listen?" but not "what am I listening to?" or "who is on later?". Those questions are what keep people on the page and bring them back, so surround the player with a little context. RadioCult's embeddable components cover this without any extra development:

• A live-now widget showing the current show, presenter, and artwork, so visitors instantly know what is playing.
• A full schedule embed so people can see what is coming up and plan to tune back in.
• A recently-played list so a listener who just caught the end of a great track can find out what it was.
• Embeddable chat so your audience can talk to each other and to you in real time, on the same chat rooms that appear in the mobile app.

Each is another iframe, so you can compose a genuine listening page rather than a bare audio widget. That richer page is what turns a one-off visit into a habit, which is the whole point of growing an online radio audience.

Placement and mobile

Where you put the player matters as much as the fact that you have one.

• Keep it visible. A player near the top of the page, or one that stays put as people scroll, means listeners can start the stream without hunting for it. Some stations use a slim persistent bar pinned to the bottom of the screen.
• Design mobile first. A large share of website visits now come from phones, so check the embed on a small screen before you worry about desktop. Make sure the play button is comfortably tappable and nothing is clipped by a narrow viewport.
• Give it room. Set sensible width and height on the iframe and let it be responsive, so the controls are never squeezed or cut off.

Building a custom player with the API

If you want the player to match your design exactly, you will likely build your own. This gives you full control over how it looks and behaves.

The good news is that it is not hard with a little technical knowledge. Render an HTML audio element with its src set to your RadioCult streaming URL, then style and script the controls with your own CSS and JavaScript. To show accurate now-playing information, live show details, and schedule data in your custom interface, pull them from RadioCult's documented API rather than trying to parse stream metadata by hand.

Common pitfalls to avoid

A few issues come up again and again:

• Autoplay that never plays. Modern browsers block audio that tries to play before a user interacts with the page. Do not rely on autoplay. Let the listener press play.
• Fixed sizes that break on mobile. Hard-coded pixel widths look fine on your laptop and overflow on a phone. Use responsive sizing and test on real devices.
• Forgetting now-playing. A player with no context leaves visitors guessing. Add the live-now widget so the current show is always clear.
• Content Security Policy blocks. If your site sets a strict CSP, an iframe or stream host can be blocked silently. Check the browser console and allow the relevant sources if the embed does not appear.
• Burying the player. If people have to scroll to find it, many never will. Put it where the eye lands first.

Where to go next

An embedded player is one piece of a station website that works. If you are still planning the site itself, our guide to creating your online radio station website covers the wider build, and if you are weighing up whether you even need one, does an internet radio station need a website? makes the case. When you are ready to put it all together, the launching an online radio station walkthrough ties the station, the site, and the embeds into one setup.

Ready to put a working player on your site in minutes? Start your free 7-day trial with RadioCult and grab your embed code.

As always, keep it locked.