第 14 章：背景音乐与弹幕
“没有 BGM 的活动是没有灵魂的。”
为了让活动页面更具沉浸感，我们增加了背景音乐自动播放和实时弹幕互动功能。
14.1 背景音乐自动播放
在 ActivityDetail 页面，如果配置了 musicUrl，我们希望它能自动播放。
音频管理器 (BackgroundAudioManager)
微信小程序提供了全局唯一的背景音频管理器。
const bgm = uni.getBackgroundAudioManager()
const playMusic = (url, title) => {
bgm.title = title || '活动背景音乐'
bgm.src = url // 赋值即播放
bgm.loop = true // 部分端需要手动处理循环
}
自动播放的坑
由于浏览器的自动播放策略限制，H5 端通常需要用户交互（点击）后才能播放。小程序端则宽松很多，但在某些 Android 机型上仍可能失败。 解决方案: 在页面显示一个旋转的“音乐图标”。如果自动播放失败，引导用户点击图标手动开启。
14.2 弹幕系统设计
弹幕 (Barrage) 是增强参与感的利器。当有人报名或投票时，屏幕上飘过一行字，热闹非凡。
弹幕来源
- 系统生成: 用户报名/投票成功后，后端自动向
barrages表插入一条记录 (type: 'registration'). - 用户发送: (可选) 用户在评论区手动发送的弹幕。
前端渲染轨道
前端不需要复杂的 Canvas 引擎，简单的 CSS 动画即可。
- 轨道设计: 屏幕分为上、中、下 3 条轨道，避免弹幕重叠。
- 动画: 使用 CSS
transform: translateX从右向左移动。
@keyframes barrage-move {
from {
transform: translateX(100vw);
}
to {
transform: translateX(-100%);
}
}
14.3 实时消息推送
虽然我们没有使用 WebSocket（成本高），但可以通过轮询 (Polling) 模拟实时感。
前端每隔 10-30 秒调用一次 barrage/list 云函数，获取最新的弹幕列表，并添加到播放队列中。
本章小结： 音乐和弹幕虽然不是核心业务，但它们极大地提升了用户体验，让小程序看起来更“专业”、更“鲜活”。下一章，我们将解决推广难题——活动海报生成。
