CloudRadio includes a free, embeddable web player that works with any hosted radio, AutoDJ station, or external HTTPS audio stream. All 6 player designs are free for every broadcaster.
Create a Player
From a Station Page
The quickest way to create a player is from your radio or station detail page:
- Open your radio or station
- Click Players in the sidebar
- Click New Player
The stream source is pre-selected automatically. If your radio has multiple mount points, you’ll be asked to pick one. Otherwise, you go straight to naming your player and confirming.
From the Players Page
You can also create players from the main Players page:
- Go to Players from the main navigation
- Click New Player
-
Choose a stream source type:
- My Radio: select one of your CloudRadio hosted radios
- AutoDJ HLS: select one of your CloudRadio One stations (only shown if you have AutoDJ stations)
- External Stream: enter any publicly accessible Icecast, Shoutcast, or HLS URL (HTTPS required)
- Select the specific radio, station, or enter the URL
- Name your player and click Create
You can create multiple players for the same stream source. This is useful if you want different designs for different pages on your site.
Customize
After creating a player, the editor opens with a live preview on one side and customization options on the other. All changes are previewed in real time before you save.
Layouts
Choose from 6 player designs:
| Layout | Size | Best for |
|---|---|---|
| Bar | 500 × 80 px (responsive width) | Sticky headers, footers, page banners |
| Box | 320 × 502 px | Sidebars, standalone embeds with cover art |
| Mini | 240 × 70 px | Minimal embeds, floating buttons |
| Vinyl | 320 × 400 px | Feature pages, music-focused sites |
| Cassette | 320 × 222 px | Retro-themed sites, compact embeds |
| Cyber | 320 × 356 px | Modern, neon-styled sites |
Click a layout in the Layout section to switch. The preview updates instantly.
Colors
Set your player’s primary color to match your brand. Text and accent colors are auto-calculated for optimal contrast.
Use the color picker in the Player Color section to choose a hex color.
The Cyber layout uses curated neon presets instead of a free color picker: Arc Cyan, Hyper Pink, Neon Lime, or Pulse Violet.
Typography
Select a font style for your player:
| Font | Style |
|---|---|
| Modern | Clean system fonts |
| Serif | Classic book-style |
| Monospace | Technical look |
| Humanist | Friendly and warm |
Font selection is available for Bar, Box, Mini, and Vinyl layouts. Cassette and Cyber use fixed typography.
Cover Art
The cover art image is displayed when no track artwork is available from the stream.
Click the cover art thumbnail in the editor to choose between:
- Inherit: uses the cover art from your radio’s branding settings (hosted radios only)
- Preset: select from built-in artwork options
When your stream provides track metadata, CloudRadio automatically fetches and displays matching album art. The default cover art only appears as a fallback.
Playback
Autoplay starts playing as soon as the player loads. Most browsers block autoplay for audio until the visitor interacts with the page, so a play button may appear instead.
Default Volume sets the initial volume level (0 to 100%). Listeners can adjust the volume after the player loads, and their preference is saved in the browser for future visits.
Embed on Your Website
Open the Embed tab in the player editor to get ready-to-copy code for your website.
Iframe
The iframe embed places the player directly in your page. Copy the code from the Embed Code (Iframe) section and paste it into your HTML. The code includes your player’s URL and the correct dimensions for your selected layout.
Example of what the generated code looks like:
<iframe
src="https://embed.clrd.net/player/your-player-id"
width="320"
height="502"
frameborder="0"
allow="autoplay; encrypted-media"
title="Radio Player"
></iframe>
The width and height values match your selected layout. For the Bar layout, use width="100%" for a responsive full-width player.
Popup Button
The popup button opens your player in a centered browser window, keeping it separate from your page layout.
Copy the code from the Popup Player Button section. You can change the button text and style it with your own CSS. Use the Test Popup button in the editor to preview the result.
Troubleshooting
Player shows “Connection failed”
Check that your stream source is online. For external streams, confirm the URL is publicly accessible and uses HTTPS.
Autoplay doesn’t work
Most browsers block autoplay until the visitor interacts with the page. This is a browser policy. The player will show a play button for the listener to start manually.
Player looks too large or small
Make sure your iframe dimensions match the recommended sizes for your layout (see the layout table above). For responsive designs, use width="100%" with the Bar layout.