集成

如何嵌入 Tunio 播放器

通过 npm、Yarn 或 pnpm 安装和使用 Tunio 网页播放器的指南。

为何选择 Tunio Player

Tunio Player 是一个网页组件，可让您将广播流嵌入到任意网站或内部控制台。它能适配您的品牌、渲染当前曲目封面，并实时显示广播流状态。

安装

选择您喜欢的包管理器并安装 tunio-player：

BASH
npm install tunio-player
# 或
yarn add tunio-player
# 或
pnpm add tunio-player

使用方法

导入播放器并传入广播流 id。该 UUID 可在 Tunio 控制台中 广播流设置 → 通用 模块内获取。

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

如果您使用 SSR 或 Next.js App Router 渲染页面，请在客户端模块中挂载组件，跳过服务端渲染。

播放器能力

  • 显示当前曲目、封面图和在线状态。
  • 通过 props 支持自动播放与音量控制。
  • 自适应布局，提供现成主题。
  • 通过 playState 事件挂接自定义播放/暂停按钮。

完整的 API 参考和可选 props 请见 tunio-player 仓库。