How to Create a Modern Pop-Up Player for SHOUTcast and Icecast in 2026

If you run an online radio station, you may want a small pop-up player that allows listeners to keep your stream playing while they browse your website.

Years ago, pop-up players relied on outdated embed methods and browser plugins. In 2026, the correct approach is much simpler and more reliable, using HTML5 audio, secure HTTPS streaming, and click-triggered pop-ups that work with modern browser policies.

If you are looking for a standard embedded player instead of a pop-up window, see our guide on the best HTML5 player for SHOUTcast and Icecast. That method is usually recommended for maximum compatibility.

When Does a Pop-Up Player Make Sense?

A pop-up player can be useful if you want:

• A dedicated mini player window
• Clean separation between your website and audio playback
• A simple “Listen Live” button that opens a lightweight player

However, keep in mind that mobile browsers may block pop-ups, and modern browsers restrict autoplay unless the listener interacts with the page. For many stations, an embedded player or floating player is often the better choice.

Requirements Before Creating Your Pop-Up Player

Before setting up your pop-up player, make sure you have:

• A working SHOUTcast or Icecast stream URL
• MP3 or AAC format enabled
• HTTPS streaming enabled to avoid browser warnings
• A reliable streaming server

If you do not yet have secure streaming enabled, read our explanation of SSL streaming and why it matters for internet radio. Modern browsers are increasingly strict with mixed content.

If you are still choosing a hosting provider, see our Internet Radio Hosting plans for SHOUTcast and Icecast with SSL streaming, AutoDJ, and global compatibility.

Step 1, Create a Dedicated Player Page

Create a new page on your site called Player (or create a file named player.html). This page will be the content shown inside the pop-up window. Keep it lightweight, mobile friendly, and focused only on playback.

Paste the following code into the Player page using a Custom HTML block, then replace the stream URL with your own.

<div style="max-width:520px; margin:0 auto; font-family:Arial, sans-serif; text-align:center; padding:20px;">
  <h2 style="margin:0 0 10px 0;">Listen Live</h2>
  <p style="margin:0 0 15px 0; color:#444;">If playback does not start, press play.</p>

  <audio controls autoplay playsinline style="width:100%;">
    <source src="https://your-stream-url-here:8000/stream" type="audio/mpeg">
    Your browser does not support HTML5 audio.
  </audio>

  <p style="margin:12px 0 0 0; font-size:12px; color:#666;">
    Tip, some browsers block autoplay unless you interact with the page.
  </p>
</div>

Important: if you are using AAC, change type="audio/mpeg" to type="audio/aac" and confirm your server sends the correct MIME type. MP3 is usually the most universally compatible option.

Step 2, Add a Pop-Up Button to Your Website

Now add a button on your homepage, header, or listen page. The button click opens the Player page in a small pop-up window. Pop-ups generally only work reliably when opened by a direct click.

Paste the following code into a Custom HTML block where you want the button to appear. Replace the placeholder URL with the full link to your own Player page.

<button type="button" onclick="scOpenRadioPlayer()" style="background:#17a3d5; color:#ffffff; border:0; padding:12px 16px; border-radius:8px; font-size:16px; cursor:pointer;">
  Listen Live
</button>

<script>
function scOpenRadioPlayer() {
  var url = "https://www.yoursite.com/player/";
  var w = 420;
  var h = 320;

  var left = (screen.width / 2) - (w / 2);
  var top = (screen.height / 2) - (h / 2);

  window.open(
    url,
    "ShoutCheapRadioPlayer",
    "width=" + w + ",height=" + h + ",left=" + left + ",top=" + top + ",resizable=yes,scrollbars=no"
  );
}
</script>

Autoplay Rules in 2026

Most modern browsers block autoplay with sound unless the user clicks a button or interacts with the page. That is why this guide uses a button click to open the player. If the audio does not start automatically, the listener can press play in the pop-up window.

Mobile Note

Many mobile browsers block pop-ups or open them in a new tab. If you want the best mobile experience, consider also adding an embedded player on a normal page as a fallback.

Troubleshooting

• Pop-up blocked: the listener must click the button, and they may need to allow pop-ups for your site.
• No audio: verify your stream URL works in a browser, and confirm your stream is online.
• HTTPS issues: if your site is HTTPS but your stream is HTTP, some browsers may warn or block playback.
• Wrong format: MP3 is usually easiest. AAC works well too, but confirm MIME types.

If you want a cleaner alternative, consider a normal embedded HTML5 player instead of pop-ups, especially for mobile listeners.

FAQ