A live audio player is the main attraction on a scanner or radio page, and it is also the heaviest thing on it. An embedded player is a small web page of its own, with its own scripts, and it starts loading the moment yours does. Put three of them on one page and visitors on phones wait several seconds before they can read a word. A few habits keep the player and lose the delay.
Load the player only when it is needed
If the player is an <iframe>, the simplest improvement is one attribute:
<iframe src="https://player.example.com/feed/123"
loading="lazy" width="100%" height="120"
title="Live audio: County Fire and EMS"></iframe>loading="lazy" tells the browser to hold off until the visitor scrolls near it. Always set a width and height so the page does not jump when the player appears, and a title so screen-reader users know what the frame is.
Better still: load it on click
For a page with several feeds, show a plain button for each and create the player only when one is pressed. Nothing from the audio provider loads until someone actually wants to listen:
<button class="listen" data-src="https://player.example.com/feed/123">
Listen live: County Fire and EMS
</button>
<script>
document.querySelectorAll('.listen').forEach(function (button) {
button.addEventListener('click', function () {
var frame = document.createElement('iframe');
frame.src = button.dataset.src;
frame.width = '100%';
frame.height = '120';
frame.title = button.textContent.trim();
button.replaceWith(frame);
});
});
</script>This also deals with autoplay. Browsers block sound that starts by itself, so a player that tries to autoplay just sits silent. A click counts as permission, and the stream starts at once.
If you use your own audio tag
For a direct stream address, the plain HTML player is enough:
<audio controls preload="none" src="https://stream.example.com/live.mp3"></audio>preload="none" matters. Without it, some browsers open the stream as the page loads and keep downloading it whether or not anyone presses play, which wastes the visitor's data and one of your stream's listener slots.
Streams in HLS format, with addresses ending in .m3u8, play natively in Safari. Other browsers need a small script library to play them.
Three things that silently break players
- An http stream on an https page. Browsers block insecure audio on a secure page. The stream address must start with
https://. - The provider forbids framing. Some sites send a header that stops their pages being shown inside another site. The frame stays blank and the reason is shown in the browser's developer console. Use the provider's official embed code.
- A content-security rule on your own site. If your site sends a Content-Security-Policy header, the player's address has to be allowed in it.
Check the provider's terms
Audio feeds belong to whoever runs them. Many providers allow embedding only through their own player, with their branding left in place, and some do not allow it at all. Read the terms before building a page around someone else's stream, and never re-broadcast a feed by copying its raw address out of a player you were not given permission to use.
Give the page something besides the player
A page that is nothing but an embedded player has no content of its own. It gives a visitor no context, search engines little to index, and advertising programs a reason to reject it. Around each player, write what the listener needs:
- Which agencies and channels the feed carries, and the area it covers.
- What the common codes and unit names mean.
- That audio may be delayed, may be encrypted or go silent, and is not an official source.
- Who to call in an emergency, and a reminder not to go to the scene.
That text loads instantly, serves the reader while the audio connects, and is the part of the page that is actually yours.
Common questions
Why does the player work on my computer but not on phones?
Phones are stricter about autoplay and about insecure streams. Make sure playback starts from a tap, the stream address is https, and the format is one phones play natively, such as MP3 or AAC.
Can several players run on one page?
They can, but each one that is playing holds a live connection and uses the visitor's data. Offer the feeds as buttons and load one at a time; stop the previous player when another starts.
Does a live player slow down my hosting?
The audio comes from the stream provider's servers, not yours, so it adds almost nothing to your hosting load. What it does add is page weight in the visitor's browser, which is why loading it on demand matters.