音频受限处理

什么是音频受限

新页面加载后立即自动播放音频（或带有音轨的视频）可能会让用户感到意外，所以主流浏览器对音频自动播放有音频受限策略。自动播放音频的场景下，因为可能与页面无交互，会触发音频受限策略。非自动播放或静音播放场景，音频则不受限。具体表现在，如果audio或video标签携带autoplay属性，页面加载完后，不会自动播放；如果强行调用play接口，会报类似“Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first”的错误。

HTML：

<video src="/video_with_audio.mp4" autoplay></video>

JS：

videoElement.play();

直接在新页面自动播放带有音频的视频，会受到浏览器的阻止。

PlayButton.addEventListener('click', () => {   
  videoElement.play(); 
})

音频受限引发的LLL SDK报错信息

使用LLL SDK自动播放低延时直播流，且非静音播放时：

const options = {
  elementId: 'elementId',
  autoPlay: true,
}
startPlayPromise = playClient.startPlay(streamUrl, options)

设置autoPlay为true。如果不设置autoPlay，也会默认为true。当音频受限时，浏览器控制台报错如下所示：

[HWLLS] [error] [HLLSTrack] [play audio failed: ["code": 51000000, "message": "the user didn't interact with the document first, please trigger by gesture."] ]
### lll play SDK occur error: {"errCode":51000000,"errDesc":"the user didn't interact with the document first, please trigger by gesture."}

同时如果监听Error，会报51000000错误码，如下所示：

playClient.on('Error', (resp) => {
  if (resp.errCode === 51000000) {
    //音频受限报错
  }
})

最佳实践

手动播放

LLL SDK静音播放调用示例如下：

const options = {
  elementId: 'elementId',
  autoPlay: false
}
startPlayPromise = playClient.startPlay(streamUrl, options)

设置播放参数autoPlay为false，添加播放按钮让用户在点击的时候才开始播放。

图1 样例效果图

自动播放失败监听

先自动播放，且不静音播放：

const options = {
  elementId: 'elementId',
  autoPlay: true,
 }
startPlayPromise = playClient.startPlay(streamUrl, options)

遇到音频受限时，监听错误码如下所示：

playClient.on('Error', (resp) => {
  if (resp.errCode === 51000000) {
    //音频受限报错
    //界面添加取消静音按钮
  }
})

此时即使音频受限，也会先静音播放视频。如果用户想听声音，可以单击“点击取消静音”按钮播放音频。对于不受限的场景，则会直接同步播放音频和视频。

图2 样例效果图1

图3 样例效果图2

代码示例

LLL SDK需解压至“sdk/”目录。

• 自动播放失败监听的代码示例，如自动播放失败监听所示。
• 手动播放的代码示例，如手动播放所示。