Embed
Embed the DataMind FM player
From a 40-pixel pill in your footer to a full-screen stage: one player, live audio, now playing and lock-screen controls. Free, on any page.
Which one should I use
| You want | Use | Size |
|---|---|---|
| A quiet player in a footer or a docs sidebar | Micro | 240 × 44 |
| A slim bar in a sidebar or next to an article | Mini bar | 320 × 64 |
| A player inside a blog post | Card | 400 × 160 |
| The full show on a landing page, a TV or a phone | Pulse or Video | 16:9, 1:1, 9:16 |
| What is on air, without audio | Now-playing badge | 320 × 64 |
| Music on every page of your site, one line of code | Floating (embed.js) | 340 × 76 |
| A README, where iframes and scripts do not run | Text link | text |
Gallery
Live previews. Starting one stops the others.
Build your embed
Iframe
Script tag
Markdown
HTML
Options
Every variant is the same player at https://embed.datamind.fm/ with URL parameters. With the script tag, use the same names as data- attributes.
| Parameter | Values | Default | What it does |
|---|---|---|---|
layout | stage, card, mini, micro, badge, float | stage | The variant. compact=1 still works and means card. |
mode | pulse, video, audio | pulse | Stage only. Pulse is the DataMind FM mark moving with the music, Video is the generative live video, Audio only has no visuals. Listeners can switch, and their choice is remembered. visual is an old name for pulse. |
theme | dark, light, auto, transparent | dark | Auto follows the viewer's system setting. Transparent drops the background and follows the viewer too; use it on plain backgrounds. |
accent | coral, teal | coral | Colour of the play button, live dot and progress. The DataMind FM tile stays coral. |
radius | 0 to 40 | per variant | Corner radius in pixels. Round the iframe the same way. |
title | 1, 0 | 1 | Show the track title. With 0 the player shows the station name. |
listeners | 1, 0 | on for mini, card, stage | Show how many people are listening. |
muted | 1 | off | Start muted. Together with autoplay=1, most browsers allow the stream to start on its own. |
autoplay | 1 | off | Try to start on load. Without muted=1, browsers usually block sound until the listener clicks, and the player shows Play. Keep allow="autoplay" on the iframe. |
One script tag
embed.js adds one iframe and nothing else: no cookies, no inline styles, no eval. With data-layout="floating" it docks a player bottom right that folds into a round button and remembers that choice. With any other layout it places the player where the script tag is.
<script src="https://embed.datamind.fm/embed.js" data-layout="floating" data-mode="pulse" async></script>- Attributes.
data-layout,data-mode,data-theme,data-accent,data-radius,data-title,data-listeners,data-autoplay,data-muted; for inline layouts alsodata-widthanddata-height; for floating,data-position="left". - One global.
window.DataMindFMwithplay(),stop(),command(name, value)andremove(). - Content Security Policy. If your site sends one, allow the script and the frame:
script-src https://embed.datamind.fm;
frame-src https://embed.datamind.fm;postMessage API
Your page can control any variant and follow what it plays. 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.{ command: "setMode", value: "pulse" }:"pulse","video"or"audio"(stage only)."toggleMode"switches between Audio only and the last visual mode.{ command: "setVolume", value: 0.5 }: volume from 0 to 1. iOS always uses the hardware volume."expand","collapse": open or fold the floating player.
Events, from the player to your page
{ type: "dmfm:ready", layout }: sent once when the player has loaded.{ type: "dmfm:state", layout, state, nowPlaying }: sent whenever something changes.stateholdsplaying,muted,mode,volumeandatLiveEdge(it isnullfor the badge, which has no audio).nowPlayingis the track the listener hears right now, a few seconds behind the server:title,slug,startedAtandduration, ornullwhile the stream is offline.{ type: "dmfm:resize", width, height, collapsed }: floating layout only, used by embed.js to size the frame.
Example
<iframe id="dmfm" src="https://embed.datamind.fm/?layout=mini"
title="DataMind FM live player" width="320" height="64"
style="border:0;border-radius:14px;max-width:100%;color-scheme:light" allow="autoplay" loading="lazy"></iframe>
<script>
const frame = document.getElementById('dmfm');
const ORIGIN = 'https://embed.datamind.fm';
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: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>Good to know
- Free to use. Embed it on as many pages as you like. Every variant keeps a small "Powered by DataMind FM" link.
- Light on your page. Micro, mini, card, badge and floating never load the animation code; only Pulse and Video do, and they pause when out of view.
- 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. No cookies. The player counts anonymous events such as Play and Stop with cookieless analytics (Plausible), including the hostname of the page that embeds it. The badge counts nothing.
- oEmbed. Platforms that support oEmbed discovery can turn a datamind.fm link into the player.