Embed
Embed the DataMind FM player
One iframe puts the station on your site: live audio, now playing, lock-screen controls and a compact bar that fits a sidebar. Free, on any page.
Build your embed
Your snippet
<iframe src="https://embed.datamind.fm/?mode=visual&theme=dark" title="DataMind FM live player" width="480" height="280" style="width:100%;max-width:480px;height:280px;border:0;border-radius:12px" allow="autoplay" loading="lazy"></iframe>URL parameters
The player reads four parameters from its URL. Anything else is ignored.
| Parameter | Values | Default | What it does |
|---|---|---|---|
mode | visual, audio | visual | Visual shows the live Network D scene. Audio only shows the controls and stops the animation, which saves battery. |
theme | dark, light | dark | Colour scheme of the player. Coral stays coral in both. |
compact | 1 | off | One-row bar for sidebars and footers, from about 300 × 80 px. Frames under 150 px tall switch to it automatically. |
autoplay | 1 | off | Tries to start playing on load. Browsers block sound until the listener interacts, so the player falls back to a Play button. Keep allow="autoplay" on the iframe. |
postMessage API
Your page can control the player and follow what it plays. Send commands to the iframe; listen for events from it. Messages are plain objects with a type field. Commands are accepted from any origin and events are posted to any origin, so always check event.origin on your side.
Commands, from your page to the player
{ type: "dmfm:command", command: "play" }: connect at the live edge. Needs a user gesture on your page."stop": disconnect the stream."live": jump back to the live edge after a pause."mute","unmute": keep the connection, silence the sound."toggleMode": switch between visual and audio only.{ command: "setVolume", value: 0.5 }: volume from 0 to 1. Phones may ignore it; iOS always uses the hardware volume.
Events, from the player to your page
{ type: "dmfm:ready" }: sent once when the player has loaded.{ type: "dmfm:state", state, nowPlaying }: sent whenever something changes.stateholdsplaying,muted,mode,volumeandatLiveEdge.nowPlayingholdstitle,slug,startedAtandduration, ornullwhile the stream is offline.
Example
<iframe id="dmfm" src="https://embed.datamind.fm/?mode=audio&compact=1"
title="DataMind FM live player" width="100%" height="96"
style="border:0;border-radius:12px" allow="autoplay" loading="lazy"></iframe>
<script>
const frame = document.getElementById('dmfm');
const ORIGIN = 'https://embed.datamind.fm';
// Commands: play, stop, live, mute, unmute, toggleMode, setVolume (0..1)
function send(command, value) {
frame.contentWindow.postMessage({ type: 'dmfm:command', command, value }, ORIGIN);
}
window.addEventListener('message', (event) => {
if (event.origin !== ORIGIN || event.source !== frame.contentWindow) return;
const msg = event.data;
if (msg?.type === 'dmfm:ready') console.log('player ready');
if (msg?.type === 'dmfm:state') {
console.log(msg.state.playing, msg.nowPlaying?.title);
}
});
// Browsers only start audio after a user gesture on your page:
document.querySelector('#listen').addEventListener('click', () => send('play'));
</script>Try it on the preview
These buttons send commands to the preview above, exactly like your page would.
Waiting for dmfm:ready…Good to know
- Free to use. Embed it on as many pages as you like. Please keep the small "Powered by DataMind FM" link visible.
- Background playback. The player uses a plain audio stream, so listening continues with the screen locked on phones, with the track on the lock screen.
- Privacy. The player sets no cookies. It counts anonymous events such as Play and Stop with cookieless analytics (Plausible), including the hostname of the page that embeds it.
- Size. It adapts from a 300 × 80 bar to a full 16:9 stage. Under 150 px tall it becomes the compact bar on its own.