Whether you’re new to Shoutcast or Icecast or are an experienced pro, there’s one thing all Internet radio broadcasters have in common, a need for HTML5 radio players. No matter what kind of station you have, you need a way for people to tune in through your website. And, sometimes finding those juicy little nuggets known as HTML5 radio player generators can be like trying to find gold! This is why we’ve compiled our favourites to get you broadcasting to your website visitors in no time.
For this article, we have set up a working example for each HTML5 radio player using ZFM Global, shout out to one of our earliest clients! You’re lookin’ good!
Muses Radio Player Setup
We have been recommending Muses for years. It is our top pick. The main reason being it is a fully customisable web radio player. Muses Setup is an easy-to-use, copy and paste, HTML5 code generator. Best of all, it has a bunch of styles or “skins” (both official and community-driven) to suit any website. Big or small, colourful or minimal, the Muses.org generator offers a unique range of free HTML5 radio players.
Above the “RadioVoz” player skin is shown as an example.
The links you need for Muses player setup:
- Pick a radio player skin to prepare.
- Find your ‘Stream URL’ for the radio player generator.
- Generate your player code with the Muses Setup.
- Check the Muses FAQ if you have issues.
BOOM! Now embed the free HTML5 radio player code into your website. And most of all, remember, friends don’t let friends set autoplay=true!
KPlayer MP3 Radio Player
The KPlayer generator maintained by RadioForge is a straightforward solution for your web radio player needs. Just like Muses, all you have to do is enter a few details about your station’s stream, and BOOM, you’re ready to go.
The generator outputs HTML5 code for you to copy and paste directly into your website. The only real downside is there is no customisation of the player’s theme or skin, which Muses does offer. Also of note, the code is generated in the form of an HTML 'iframe' tag which is not conventional for SSL standards. However, the KPlayer MP3 radio player is free and responsive, meaning it works universally across all devices (like most HTML5 players).
The KPlayer HTML5 radio player generator links you want:
- How to find your ‘Stream URL’.
- Generate your own KPlayer code.
- Icecast and Shoutcast Metadata API.
SHOUTcast Widgets Generator
SHOUTcast Widgets has come up with a really flexible, free HTML5 radio player generator. Like the other recommended HTML5 radio players in this article, the code can be copied and pasted right into your website.
However, customising the look and feel of this player can be challenging. The orange HTML5 radio player button you see above has been styled with custom CSS. Advanced users may find this to their advantage. Then again, the premade skins of the Muses Setup generator are hard to beat. The good news is, this HTML5 radio player is also free.
The SHOUTcast Widgets generator links:
- Input your ‘Stream URL’ into the radio player generator.
- Generate your free HTML5 radio player code.
StreamCast WordPress Plugin
ZFM Global - Auckland's Hits
Surprisingly, there is only one freebie in the entire WordPress plugins library even worth looking at – at least as of the last update of this post. It’s not an HTML5 radio player generator per se, but is the equivalent.
The StreamCast Radio Player Plugin for WordPress has both free and paid versions. What you see above is the “universal” style from the free plugin version for our purposes here.
StreamCast Radio Player installation:
- Download and install the official WordPress plugin.
- Find your ‘Stream URL’ to input into the radio player plugin.
HTML5 Audio Tag
This brings us to the HTML5 audio tag. Simple but effective. This is the standard code that all HTML5 radio player generators output – because of this, you can pretty much guarantee it will work on everyone’s devices/browsers.
The downside to this player is no website generates the code for you so it does require a little bit of effort. However, it’s super easy. We promise. For instance, you might have noticed all of these free HTML5 radio player generators output very similar code. News flash! It’s the HTML5 audio tag.
Try copying and pasting the following code into your website:
<audio controls="controls" autostart="0" autostart="false" preload="none">
<source src="YOUR STREAM URL" type="audio/ogg" />
<source src="YOUR STREAM URL" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Now replace YOUR STREAM URL with your station’s streaming URL. Boom, done!
The HTML5 audio tag links:
- How to find your ‘Stream URL’.
- More on the HTML5 audio tag.
In our opinion, these are currently the best free HTML5 radio players out there and our top recommendations. We scoured Google and tested lots of bad HTML5 code generators so you wouldn’t have to. But, if we have missed one please let us know by leaving a comment below.
And that’s a wrap, folks! If you like this page you might enjoy some of our other popular articles as well. Thank you for reading.
Related reading material
Are there any icecast players that will display song lyrics or custom fields?
Kia ora Fred, Every Icecast and Shoutcast player is different, but in general, most HTML5 radio players will display the metadata sent to them. Hence, I think your question may eventually lead you to the metadata of the audio files or to an encoder such as Rocket Broadcaster.
Small disclaimer though, a constant feed of song lyrics may be taxing on the client/server.