CloudRadio One stations report which input is actually on air, so your website can show a live indicator while a DJ is broadcasting and hide it while AutoDJ plays. Both the JavaScript widget and the status API expose it, and both distinguish the Studio Input from the Guest DJ Input.
The indicator reflects what listeners are hearing, not who is connected. If a DJ's encoder is connected but the stream has already fallen back to a relay or to AutoDJ, the indicator reports the source listeners actually hear.
This applies to CloudRadio One stations, which run our AutoDJ and live inputs. Streams hosted on your own Shoutcast or Icecast server have no live-versus-automated distinction, so the fields described here are absent for them.
Widget attributes
If you already use the JavaScript widget, no extra script is needed. The widget sets two attributes on #stream_info_status:
| Attribute | Values |
|---|---|
data-source | live, relay, or automated |
data-source-name | studio or guest, only while data-source is live |
data-source-name is removed when no live input is on air, so a CSS rule keyed to it never fires by accident.
Add a live source element
To display the name of the live input as text, add this element anywhere on your page:
<span id="stream_info_live_source"></span>
The widget writes Studio or Guest DJ into it while that input is on air, and clears it to an empty string otherwise. The element carries the same data-source and data-source-name attributes as the status element, so you can style it on its own.
You'll find this snippet with a copy button and a live preview under Text widgets on your station's Widgets & Links page in Studio.
Style the indicator
The attributes are the styling hook. Because the widget writes plain text and never its own styling, your stylesheet controls the whole appearance:
/* an on air light only while a real person is on the mic */
#stream_info_status[data-source="live"] {
color: #dc2626;
font-weight: 600;
}
#stream_info_status[data-source="live"]::before {
content: "";
display: inline-block;
width: .5em;
height: .5em;
margin-right: .45em;
border-radius: 50%;
background: currentColor;
}
/* tell the two live inputs apart */
#stream_info_status[data-source-name="guest"] { color: #7c3aed; }
/* hide the live source label whenever nothing live is airing */
#stream_info_live_source:not([data-source="live"]) { display: none; }
The widget polls every 10 seconds, so the indicator can lag a DJ going on air by up to about 15 seconds.
Read it from the status API
If you write your own JavaScript instead of using the widget, the same information is on the public status endpoint:
GET https://public.cloudrad.io/your-station-slug/status
The response carries a source object:
{
"status": "online",
"source": {
"type": "live",
"collaborator": "studio",
"relay": null
}
}
| Field | Meaning |
|---|---|
source.type | live while either live input is on air, relay while a relay is on air, automated while AutoDJ is playing |
source.collaborator | studio or guest when type is live, otherwise null |
Both live inputs report type: "live". The specific input is always in collaborator, so a page that only cares whether someone is on air can read type alone.
An offline station returns "status": "offline" with type set to automated.
This endpoint supports CORS, so you can call it from your own domain. Responses are cached for 5 seconds. The full payload (listeners, now playing, history) is documented in Station Status API.
The same state is also on the widget's data endpoint, https://embed.clrd.net/api/your-subdomain/info.json, as a source_state object with type and name keys.