今天遇到一个需求,后端socket推送警告消息,浏览器提示消息弹框和声音。但是初次打开页面发小声音播放失败,控制台报错:
错误内容:play() failed because the user didn't interact with the document first.
意思就是,用户没有在当前页面进行任何操作。
方案一:手动打开浏览器声音权限,在浏览器地址栏输入下面链接打开浏览器设置(经过测试这个链接地址没有办法通过a标签和js打开)
Google浏览器:chrome://settings/content/sound
Firefox浏览器:about:preferences#privacy
Edge浏览器:edge://settings/content/mediaAutoplay
方案二:声音播放失败提示用户手动授权,只要用户跟当前页面存在交互,浏览器就不会存在这个错误。
// 加载声音
const sound = new Audio(`video.mp3`)
// 播放声音
sound.play()
.then((res) => {
console.log('视频播放成功')
})
.catch((error) => {
// if (error.message.indexOf('didn't interact') !== -1) 判断报错内容
// 如果视频播放失败在这里弹出提示框
alert('由于您的浏览器设置,报警声音无法自动播放,请点击确认按钮授权播放。')
})
这里说下目前没有发现获取声音权限和设置声音权限的API
上面是解决办法,下面讲一下浏览器获取麦克风、通知,视频权限。
1、可以通过navigator.permissions.query API 查询浏览器权限是否开启。
// 查询麦克风权限
navigator.permissions.query({ name: 'microphone' })
.then((res) => {
if (res.state === 'granted') {
// 已授权
}
})
// 查询相机权限
navigator.permissions.query({ name: 'camera' })
.then((res) => {
if (res.state === 'denied') {
// 拒绝授权
}
})
返回的结果:{name: "", onchange: "", state: ""}
下面权限列表,都经过测试。
microphone 麦克风权限
camera 相机权限
geolocation 地理位置信息
notifications。 网站显示桌面通知权限
....等权限
2、可以通过navigator API 设置浏览器允许权限。
// 设置麦克风权限
navigator.mediaDevices.getUserMedia({ audio: true })
.then((res) => {
// 允许麦克风权限
})
.catch((error) => {
// 拒绝麦克风权限
})
navigator.geolocation.getCurrentPosition(
() => {
// 允许地理位置权限
},
() => {
// 拒绝地理位置权限
})
下面设置权限,都经过测试。
navigator.mediaDevices.getUserMedia({ audio: true }).then() 麦克风权限
navigator.mediaDevices.getUserMedia({ video: true }).then() 摄像头权限
navigator.geolocation.getCurrentPosition(callback) 地理位置权限
Notification.requestPermission().then() 通知权限
.....等设置权限
经过在Google、Firefox、Safari、Edge浏览器上测试,发现只有Google浏览器全部支持,其他浏览器只部分支持。