If you build your own website player instead of using the CloudRadio embeddable player, you can use the CloudRadio HLS bundle to stream your HLS feed with optimized settings for live audio.
Your master HLS playlist URL is shown on the Widgets & Links page in Studio. It looks like this:
https://hls.cloudrad.io/your-slug/stream.m3u8CloudRadio HLS bundle
CloudRadio publishes a small JavaScript bundle that wraps hls.js with adaptive bitrate (ABR) settings tuned for live audio radio. Using it gives you the same playback behavior as the official CloudRadio player, including stable rendition selection and Safari fallback.
<audio id="player" controls></audio>
<script src="https://assets.clrd.net/assets/js/cloudradio-hls.js"></script>
<script>
CloudRadio.play(
document.getElementById("player"),
"https://hls.cloudrad.io/your-slug/stream.m3u8"
)
</script>
The play function returns a promise that resolves once the stream is ready, and rejects on fatal playback errors. The resolved value exposes a destroy() method for clean teardown when switching streams.
<script>
let session = null
async function start(url) {
if (session) session.destroy()
session = await CloudRadio.play(document.getElementById("player"), url, {
onError: (data) => console.warn("HLS error", data),
})
}
</script>
The bundle is served from CloudRadio’s CDN (assets.clrd.net) with permissive CORS and long-lived caching. It works on all modern browsers and falls back to native HLS playback on Safari and older iOS versions where Media Source Extensions are unavailable.
Adding live metadata
To display the current song title, listeners, and other live data alongside your custom player, include the lightweight CloudRadio info script:
<script src="https://public.cloudrad.io/your-slug/streaminfo.js"></script>
<p>Now playing: <span id="stream_info_song">—</span></p>
<p>Listeners: <span id="stream_info_listeners">—</span></p>The script polls every 10 seconds and updates any element with a matching ID. See Widgets & Links for the full list of supported elements and the JSON API.
Troubleshooting
Playback won’t start on iOS. Mobile Safari requires a user gesture (tap or click) before audio can play. Trigger audio.play() from a click handler, not on page load.
CORS errors loading the bundle. The CloudRadio HLS bundle is served from assets.clrd.net with Access-Control-Allow-Origin: *. If you see CORS errors, double-check that you’re loading from https://assets.clrd.net/assets/js/cloudradio-hls.js and not from a stale local copy.