Tutorial: 背景音乐实现方案

背景音乐实现方案

功能描述

本文将介绍如何在通话过程中增加背景音乐的功能，点击 体验 demo 进行体验。

前提条件

TRTC 版本 5.1+

支持在通话中添加背景音乐的平台如下：

操作系统 浏览器类型 浏览器最低版本要求
Mac OS 桌面版 Chrome 浏览器 56+
Mac OS 桌面版 Safari 浏览器 11+
Mac OS 桌面版 Firefox 浏览器 56+
Mac OS 桌面版 Edge 80+
Windows 桌面版 Chrome 浏览器 56+
Windows 桌面版 QQ 浏览器（极速模式） 10.4+
Windows 桌面版 Firefox 浏览器 56+
Windows 桌面版 Edge 80+
iOS 移动版 Safari 浏览器 14+
iOS 微信内嵌网页 ✖
Android 移动版 Chrome 浏览器 81+
Android 微信内嵌网页(TBS 内核) ✔
Android 移动版 QQ 浏览器 ✖

实现流程

开启背景音乐

注意：

  • 播放在线音效文件时，音效文件必须支持 CORS ，且访问协议必须为 https 协议。
  • 支持的格式为 MP3，AAC（以及浏览器支持的其他音频格式）。
  • 网页在没有用户交互之前，浏览器禁止网页播放带有声音的媒体，建议引导用户执行点击行为后调用该接口。
  • 参考：Autoplay_guide 。
await trtc.startPlugin('AudioMixer', {
  id: 'count',
  url: '../assets/count.mp3',
  loop: true,
  volume: 0.2
})

更新背景音乐

对背景音乐进行操作。

// 取消循环播放
await trtc.updatePlugin('AudioMixer', {
  id: 'count',
  loop: false
})
// 设置音量
await trtc.updatePlugin('AudioMixer', {
  id: 'count',
  volume: 1
})
// 将 count 音乐暂停
await trtc.updatePlugin('AudioMixer', {
  id: 'count',
  loop: true,
  volume: 0.2,
  operation: 'pause'
})
// 将 count 音乐恢复
await trtc.updatePlugin('AudioMixer', {
  id: 'count',
  operation: 'resume'
})
// 将 count 音乐从第 5s 开始播放
await trtc.updatePlugin('AudioMixer', {
  id: 'count',
  seekFrom: 5
})

关闭背景音乐

关闭某个不需要使用的音乐。

await trtc.stopPlugin('AudioMixer', {
  id: 'count'
})

API 说明

trtc.startPlugin('AudioMixer', options)

用于增加一个背景音乐

options

Name Type Attributes Description
id string 给当前传入的音乐 url 自定义一个唯一的 ID， 例如： 'bgm'
url string 音乐文件地址，与下方的 track 字段必须二选一填入，若同时传入，以 url 为准
track MediaStreamAudioTrack 自 v5.4.3+ 支持，与 url 二选一，可以传入从 <audio/> 标签中提取的 ，若同时传入，以 url 为准
loop boolean <optional> 是否循环播放，默认为false
volume number <optional> 设置初始音量，默认为1 (0-1)

Example:

await trtc.startPlugin('AudioMixer', {
  id: 'count',
  url: '../assets/count.mp3',
  loop: true,
  volume: 0.2
})

trtc.updatePlugin('AudioMixer', options)

options

Name Type Attributes Description
id string 调用 startPlugin 时定义的背景音乐文件的 ID
loop boolean <optional> 是否循环播放，默认为false
volume number <optional> 设置初始音量，默认为1 (0-1)
seekFrom number <optional> 从第几秒开始 seek 播放，此功能需要背景音乐资源文件的请求支持范围请求
operation number <optional> 对背景音乐的操作: 'pause' ｜ 'resume' ｜ 'stop'

Example:

await trtc.updatePlugin('AudioMixer', {
  id: 'count',
  loop: true,
  volume: 0.2,
  operation: 'pause'
})

trtc.stopPlugin('AudioMixer', options)

关闭某个背景音乐。

options

Name Type Attributes Description
id string 调用 startPlugin 时定义的背景音乐文件的 ID

Example:

await trtc.stopPlugin('AudioMixer', {
  id: 'count'
})

常见问题

1. 出现跨域错误

例如：Access to audio at XXX from origin XXX has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决：您需要配置线上音乐文件的 CORS 协议。

2. 音频格式不对，浏览器无法播放

例如：NotSupportedError: The operation is not supported.

解决：您需要使用浏览器支持的音频格式。