集成

如何集成点歌小部件

在广播流设置中启用 Request Desk，并通过 CDN 脚本集成小部件的指南。

点歌小部件通过 CDN 和 type="module" 的 script 进行集成。目前这是唯一受支持的集成方式（npm 模块尚未用于生产环境集成）。

1) 在广播流设置中启用 Request Desk

在网站集成前，请在 Tunio 控制台中打开目标广播流的设置页面并启用 Request Desk。

可用模式：

  • 所有流派：听众可从完整目录（所有类别）中点歌。
  • 当前播出流派：听众只能点正在播出的播放列表所使用的流派。
  • 禁用：点歌小部件实际上被关闭。

在广播流设置页面，从顶部板块复制广播流 UUID（ID）。小部件初始化需要此 UUID。

2) 点歌限制

  • 如果某首曲目在最近一小时内已经播放过，将不会发送至播出队列。
  • 每个 IP 的限制：每 30 分钟最多 1 次点歌。

3) 在您的网站上接入小部件

  1. 添加小部件样式

    HTML
    <link rel="stylesheet" href="https://cdn.tunio.ai/build/track-requests/v1.0.0/style.css" />

  2. 将小部件脚本作为 module 添加

    HTML
    <script type="module" src="https://cdn.tunio.ai/build/track-requests/v1.0.0/music-request-widget.js"></script>

  3. 脚本加载后调用初始化

    JS
    window.TunioMusicRequestWidget.init({
  streamUuid: "your-stream-uuid",
  queueTargetId: "music-order-queue",
  buttonTargetId: "music-order-button",
  lang: "en",
  theme: "dark"
})

init 参数

  • streamUuid: string —— 广播流 UUID（必填）。
  • queueTargetId?: string —— 队列容器 ID。
  • buttonTargetId?: string —— 打开按钮的容器 ID。
  • lang?: "ru" | "en" —— 小部件语言。默认值：en。
  • theme?: "dark" | "light" —— 基础主题。默认值：dark。
  • showQueue?: boolean —— 是否显示队列模块。默认值：true。
  • themeVars?: Record<string, string> —— 用于自定义设计的 CSS 变量覆盖。

要求：至少提供一个挂载目标（queueTargetId 或 buttonTargetId）。

样式自定义

您可以通过 themeVars 和/或在小部件类之上的自定义 CSS 规则覆盖小部件样式，以匹配您的网站设计。

建议在生产环境中固定一个具体的 CDN 版本（例如，v1.0.0），并在测试通过后再更新。