How to embed the Tunio player

Why Tunio Player

Tunio Player is a web component that lets you drop your broadcast onto any website or internal dashboard. It adapts to your brand, renders the current track artwork, and shows the stream status in real time.

Installation

Choose your favorite package manager and install tunio-player:

BASH

npm install tunio-player
# or
yarn add tunio-player
# or
pnpm add tunio-player

Usage

Import the player and pass the station id. This UUID is available in the Station settings → General block inside the Tunio dashboard.

TSX

import { TunioPlayer } from "tunio-player";
 
function App() {
  return (
    <TunioPlayer id="your-station-uuid" theme="dark" />
  );
}

If you render pages with SSR or the Next.js App Router, mount the component inside a client module and skip server-side rendering.

Player capabilities

Shows the current track, cover art, and on-air status.
Supports autoplay and volume control via props.
Responsive layout with ready-made themes.
Hooks into custom Play/Pause buttons via the playState event.

See the tunio-player repository for full API reference and optional props.