今天遇到一個(gè)需求，后端socket推送警告消息，瀏覽器提示消息彈框和聲音。但是初次打開(kāi)頁(yè)面發(fā)小聲音播放失敗，控制臺(tái)報(bào)錯(cuò)：

錯(cuò)誤內(nèi)容：play() failed because the user didn't interact with the document first.

意思就是，用戶沒(méi)有在當(dāng)前頁(yè)面進(jìn)行任何操作。

方案一：手動(dòng)打開(kāi)瀏覽器聲音權(quán)限，在瀏覽器地址欄輸入下面鏈接打開(kāi)瀏覽器設(shè)置

（經(jīng)過(guò)測(cè)試這個(gè)鏈接地址沒(méi)有辦法通過(guò)a標(biāo)簽和js打開(kāi)）

Google瀏覽器：chrome://settings/content/sound

Firefox瀏覽器：about:preferences#privacy

Edge瀏覽器：edge://settings/content/mediaAutoplay

方案二：聲音播放失敗提示用戶手動(dòng)授權(quán)，只要用戶跟當(dāng)前頁(yè)面存在交互，瀏覽器就不會(huì)存在這個(gè)錯(cuò)誤。

// 加載聲音
const sound = new Audio(`video.mp3`)
// 播放聲音
sound.play()
.then((res) => {
    console.log('視頻播放成功')
})
.catch((error) => {
    // if (error.message.indexOf('didn't interact') !== -1) 判斷報(bào)錯(cuò)內(nèi)容
    // 如果視頻播放失敗在這里彈出提示框
    alert('由于您的瀏覽器設(shè)置，報(bào)警聲音無(wú)法自動(dòng)播放，請(qǐng)點(diǎn)擊確認(rèn)按鈕授權(quán)播放。')
})

這里說(shuō)下目前沒(méi)有發(fā)現(xiàn)獲取聲音權(quán)限和設(shè)置聲音權(quán)限的API

上面是解決辦法，下面講一下瀏覽器獲取麥克風(fēng)、通知，視頻權(quán)限

1、可以通過(guò)navigator.permissions.query API 查詢?yōu)g覽器權(quán)限是否開(kāi)啟。

// 查詢麥克風(fēng)權(quán)限
navigator.permissions.query({ name: 'microphone' })
.then((res) => {
    if (res.state === 'granted') {
       // 已授權(quán)
    }
})

// 查詢相機(jī)權(quán)限
navigator.permissions.query({ name: 'camera' })
.then((res) => {
    if (res.state === 'denied') {
       // 拒絕授權(quán)
    }
})

返回的結(jié)果：{name: "", onchange: "", state: ""}

下面權(quán)限列表，都經(jīng)過(guò)測(cè)試。

microphone           麥克風(fēng)權(quán)限

camera                  相機(jī)權(quán)限

geolocation            地理位置信息

notifications。        網(wǎng)站顯示桌面通知權(quán)限

....等權(quán)限

 2、可以通過(guò)navigator API 設(shè)置瀏覽器允許權(quán)限。

// 設(shè)置麥克風(fēng)權(quán)限
navigator.mediaDevices.getUserMedia({ audio: true })
.then((res) => {
    // 允許麥克風(fēng)權(quán)限
})
.catch((error) => {
    // 拒絕麥克風(fēng)權(quán)限
})

navigator.geolocation.getCurrentPosition(
() => {
    // 允許地理位置權(quán)限
},
() => {
    // 拒絕地理位置權(quán)限
})

下面設(shè)置權(quán)限，都經(jīng)過(guò)測(cè)試。

navigator.mediaDevices.getUserMedia({ audio: true }).then()      麥克風(fēng)權(quán)限

navigator.mediaDevices.getUserMedia({ video: true }).then()      攝像頭權(quán)限

navigator.geolocation.getCurrentPosition(callback)                     地理位置權(quán)限

Notification.requestPermission().then()                                        通知權(quán)限

.....等設(shè)置權(quán)限

 經(jīng)過(guò)在Google、Firefox、Safari、Edge瀏覽器上測(cè)試，發(fā)現(xiàn)只有Google瀏覽器全部支持，其他瀏覽器只部分支持。

總結(jié)

到此這篇關(guān)于JS如何獲取瀏覽器聲音、麥克風(fēng)以及通知權(quán)限的文章就介紹到這了,更多相關(guān)JS獲取瀏覽器權(quán)限內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論