Tunio Player

Tunio Audio Player Component for React applications.

Installation

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

Usage

Import the component and styles

import { TunioPlayer } from 'tunio-player'
import 'tunio-player/styles.css'

function App() {
  return (
    <div>
      <TunioPlayer 
        id="your-radio-id" 
        theme="dark" 
        online
      />
    </div>
  )
}

The widget still auto-injects its styles for backwards compatibility, but explicitly importing tunio-player/styles.css is the recommended setup for predictable styling across host apps and bundlers.

Props

• id (string): Radio station id
• theme ("dark" | "light"): Player theme (default: "dark")
• ambient (boolean): Enable ambient background effect (default: false)
• opacity (number): Player opacity (default: 1)
• online (boolean): online mode by default
• buttonOnly (boolean): Render only the play/pause button without the rest of the widget UI (default: false)
• buttonOnlyClassName (string): Extra class applied to the standalone button for custom styles (background, borders, etc.)
• buttonOnlySize (number): Explicit pixel size for the standalone button; icons and spinner scale automatically with this value
• onTrackChange ((track) => void): Optional callback fired when the current track changes
• onStreamChange ((stream) => void): Optional callback fired when stream timing/details change
• onStreamConfigChange ((streamConfig) => void): Optional callback fired when player config loads or resets
• onStreamsChange ((streams) => void): Optional callback fired when playable stream URLs load or reset
• onCoverChange ((cover) => void): Optional callback fired when cover artwork changes or resets
• onPlaybackStateChange ((state) => void): Optional callback fired when play, volume, mute, buffering or mode state changes

Features

• 🎵 Audio streaming with auto-reconnection
• 🎨 Dark and light themes
• ✨ Ambient background effects
• 📱 Responsive design
• 🔊 Volume control
• 🔇 Mute functionality
• ⏯️ Play/pause controls
• 📡 Real-time track information

TypeScript Support

This package includes TypeScript definitions out of the box.

Local Development

# Install dependencies
pnpm install

# Run demo in development mode
pnpm dev

# Build package
pnpm build

License

MIT