无后端接入

在网站任意页面引入一行 <script>，danmu.js 会自动加载依赖并初始化弹幕插件，无需任何后端代码。

一、最简集成

把下面代码放到页面 </body> 前，把通道码换成你自己的：

<!-- 一行 JS 集成弹幕 -->
<script src="https://ws.phprm.com/static/customer/js/danmu.js?appName=你的应用名&channelCode=你的通道码&hidePanel=1&hideDialog=1&danMu=1"></script>

如果你的站点有内容安全策略（CSP）限制外链脚本，可以用动态注入方式：

// 动态注入一行 JS 集成弹幕（适用于有 CSP 外链限制的站点）
(function () {
    var dm = document.createElement("script");
    dm.src = "https://ws.phprm.com/static/customer/js/danmu.js?appName=你的应用名用于数据统计&channelCode=你的通道码&hidePanel=1&hideDialog=1&danMu=1";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(dm, s);
})();

二、域名认证后可省略通道码

完成 域名认证 (opens new window) 后，URL 中可以不传 channelCode，系统会按当前网址自动创建弹幕通道：

<script src="https://ws.phprm.com/static/customer/js/danmu.js?appName=我的网站&danMu=1"></script>

三、参数说明

URL 查询参数：

参数	说明
appName	自定义应用名称，用于数据统计
channelCode	通道码，注册后获取；域名认证后可省略
hidePanel	是否隐藏配置面板（0=显示，1=隐藏）
hideDialog	是否隐藏对话窗口（0=显示，1=隐藏）
danMu	是否开启弹幕（0=关闭，1=开启）
danMuSetting	弹幕外观配置（JS 初始化时传嵌套对象，子属性见下方）

danMuSetting 子属性：

参数	说明
danMuSetting.opacity	背景不透明度（0~100，100 = 不透明）
danMuSetting.size	弹幕字号（8~33）
danMuSetting.speed	滚动速度（秒）
danMuSetting.close	是否显示关闭按钮（0=否，1=是，优先于 like）
danMuSetting.like	是否显示点赞按钮（0=否，1=是），仅当 close=0 时生效
danMuSetting.bottom	距屏幕底部距离（px，bottomradio=1 时生效）
danMuSetting.bottomradio	是否按 bottom 定位（0=随机位置，1=固定）
danMuSetting.aiDanMu	AI 弹幕轮询间隔（秒，0=关闭），如 danmu.js?aiDanMu=30 表示每 30 秒轮询一次
danMuSetting.aiDanMuUrl	AI 弹幕自定义接口地址
danMuSetting.selector	弹幕挂载的 DOM 选择器（默认 body）
danMuSetting.color	弹幕文字颜色
danMuSetting.hideIcon	是否隐藏右下角浮窗图标（0=显示，1=隐藏），如 danmu.js?hideIcon=1

四、JS 初始化示例（带外观配置）

<script src="https://ws.phprm.com/static/customer/js/danmu.js?channelCode=你的通道码"></script>
<script>
document.addEventListener("websitePusherReady", function () {
    WebsitePusher.init({
        appName: "我的网站",
        channelCode: "你的通道码",
        hidePanel: 1,
        hideDialog: 1,
        danMu: 1,
        danMuSetting: {
            opacity: 50,      // 背景半透明
            size: 20,         // 字号
            speed: 18,        // 滚动 18 秒
            like: 1,          // 显示点赞
            close: 0,
            color: "#fff"     // 白色文字
        }
    });
});
</script>

五、开启 AI 弹幕

最简单的方式：脚本 URL 加 aiDanMu=30，页面会每 30 秒轮询拉取 AI 弹幕：

<script src="https://ws.phprm.com/static/customer/js/danmu.js?appName=AI弹幕&channelCode=你的通道码&hidePanel=1&danMu=1&aiDanMu=30&hideDialog=1"></script>

如需对接自己的 AI 内容接口，在 danMuSetting.aiDanMuUrl 中配置自定义接口地址。

六、弹幕消息怎么发出来？

页面集成的是接收/展示端，发送弹幕仍然走推送接口：

https://www.phprm.com/services/push/trigger/你的通道码?head=公告：今晚8点维护

任何能发 HTTP 请求的地方（你的后端、定时任务、CI、浏览器插件、AI 助手）调用这个地址，弹幕就会实时飘过所有在线页面。接口详情见 消息推送 API。

审核提示

网站访客自己发的弹幕建议走「先审核后上墙」流程：前端发送时仅本人可见，管理员审核通过后再由服务端通过 trigger 接口广播给所有人。

七、实战 Demo：小纸条信箱（匿名留言 × AI 弹幕）

在线体验：https://head.phprm.com/api/ (opens new window)

「小纸条信箱」是一个匿名留言 + 弹幕互通的真实站点：访客写下匿名小纸条，留言既展示在页面列表里，又会以弹幕形式飘过；同时开启 AI 弹幕后，组件会把页面 DOM 上的留言内容交给 AI 大模型，自动生成应景弹幕。它完整演示了 danmu.js 的高级用法。

7.1 这个 Demo 用到了哪些能力

能力	配置 / 回调	效果
关闭自动初始化	脚本 URL 加 autoInit=0	等自己的配置准备好后再手动 init
手动初始化	监听 websitePusherReady 后 WebsitePusher.init(settings)	可传入完整配置与自定义回调
AI 弹幕	danMuSetting.aiDanMu: 60	每 60 秒把页面留言内容交给 AI 大模型生成弹幕
弹幕开关记忆	danMuInitCallback	读 localStorage，用户关过弹幕就不再创建连接
弹幕数据过滤	danMuFilter(item)	渲染前查询留言点赞数，挂到弹幕上
弹幕交互回传	danMuPopCallback(dom, item)	点击弹幕/点赞时把动作写回网站数据库
自定义发送框	danMuSendOpen / danMuSendClose	不用默认面板，页面底部弹自定义「来发弹幕~」输入框
留言 ↔ 弹幕互通	发送时同时调 trigger 和留言接口	发弹幕即留言；留言超 100 条时随机抽取留言轮播成弹幕

7.2 核心代码（摘自该站点真实实现）

第一步：引入脚本时加 autoInit=0，不自动初始化：

<script>
(function () {
    var dm = document.createElement("script");
    dm.src = "https://ws.phprm.com/static/customer/js/danmu.js?appName=小纸条信箱&danMu=1&hidePanel=1&hideDialog=1&autoInit=0";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(dm, s);
})();
</script>

第二步：定义配置（含 AI 弹幕与各种回调），等组件就绪后手动初始化：

var settings = {
    appName: "小纸条信箱",
    danMu: 1,
    hidePanel: 1,
    hideDialog: 1,
    danMuSetting: {
        hideIcon: 0,
        opacity: 50,
        // 移动端 12 号字，桌面端 18 号字
        size: /Mobi|Android|iPhone|iPad|iPod|Windows Phone/i.test(navigator.userAgent) ? 12 : 18,
        speed: 18,
        like: 1,
        close: 0,
        color: "#fff",
        aiDanMu: 60          // 开启 AI 弹幕，60 秒轮询：读取页面留言交 AI 生成弹幕
    },
    // 初始化前回调：用 localStorage 记住弹幕开关
    danMuInitCallback: function (s) {
        if (localStorage.getItem("danmu_enabled") === "0") {
            return false;    // 返回 false = 不创建弹幕连接
        }
        settings = s;
        return true;
    },
    // 弹幕渲染前过滤：查询留言点赞数并挂到弹幕数据上
    danMuFilter: function (item) {
        var _this = this;
        $.getJSON('server.php', {type: 'filter', messageId: item.id}, function (resp) {
            if (resp.code != 0 || !resp.data) return;
            item.num = resp.data.likeCount || 0;
            _this.danMuFilterCallback(item, function (dom) {
                _this.danMuPopCallback(dom, item);
            });
        });
    },
    // 弹幕弹出后：绑定点赞等点击动作，回传网站数据库
    danMuPopCallback: function (dom, item) {
        item.onAction = function (barrage, action) {
            $.getJSON('server.php', {type: 'click', action: action, messageId: item.id});
        };
    },
    // 用户打开弹幕发送框：返回 false 阻止默认面板，自己画输入框
    danMuSendOpen: function (s) {
        localStorage.setItem("danmu_enabled", "1");
        // ……此处动态创建「来发弹幕~」输入框，点发送时调 callApiSendDanMu()……
    },
    danMuSendClose: function (s) {
        localStorage.setItem("danmu_enabled", "0");
    }
};

// 组件依赖加载完成后手动初始化
document.addEventListener('websitePusherReady', function () {
    WebsitePusher.init(settings);
});

7.3 留言与弹幕双向打通

发送弹幕时，如果页面 URL 带留言密码（?k=xxx），除了调 trigger 接口发弹幕，还同步写入留言系统；否则只发弹幕：

function callApiSendDanMu(params) {
    var k = new URLSearchParams(location.search).get('k');
    if (k) {
        // 发弹幕的同时写成一条留言，刷新页面留言列表
        $.post('/api/app/xly/data/index.php',
            {channelCode: params.channelCode, act: 'add', nickname: k, content: params.head, url: location.href},
            function () { /* 刷新留言列表 */ });
    } else {
        // 普通页面：直接走 trigger，云端分发给该通道所有在线客户端
        $.getJSON("server.php",
            {type: "send", channelCode: params.channelCode, head: params.head, url: location.href});
    }
}

反向也一样：留言超过 100 条后，站点定时（每 30 秒）随机抽一条留言，通过 trigger 接口推成弹幕，让老留言持续「飘」起来：

danmuTimer = setInterval(function () {
    var random = danmuRandomList[Math.floor(Math.random() * danmuRandomList.length)];
    $.getJSON("server.php",
        {type: "send", channelCode: settings.channelCode, id: random.id, head: random.nr, url: location.href});
}, 30000);

小结

这个 Demo 的套路可以直接套用：autoInit=0 + websitePusherReady 手动 init → aiDanMu 让 AI 读页面内容生成弹幕 → danMuFilter/danMuPopCallback 与你自己的业务数据（点赞、留言、商品等）打通 → trigger 接口把站内内容广播成弹幕。