前提

需要頁(yè)面自動(dòng)播放一段報(bào)警聲音，將audio標(biāo)簽的autoplay屬性設(shè)置為true，發(fā)現(xiàn)自動(dòng)播放失敗，并出現(xiàn)如下報(bào)錯(cuò)：

Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.

為什么要禁止自動(dòng)播放音頻與視頻

網(wǎng)頁(yè)加載完成后立即播放音頻（或帶有音頻軌道的視頻）可能會(huì)意外地打擾到用戶。盡管自動(dòng)播放媒體文件是一個(gè)很實(shí)用的功能，但是我們也應(yīng)該謹(jǐn)慎地使用它，保證只有在它被需要的時(shí)候才使用。為了讓用戶擁有控制權(quán)，通常瀏覽器會(huì)提供各種方式禁用自動(dòng)播放音頻功能。在這篇文章中，我們將介紹各種媒體和?Web Audio APIs?的自動(dòng)播放功能，包括關(guān)于如何使用自動(dòng)播放功能、如何優(yōu)雅的處理阻止自動(dòng)播放功能的一些簡(jiǎn)短的介紹。

Autoplay 功能

? 據(jù)新政策，媒體內(nèi)容將在滿足以下至少一個(gè)的條件下自動(dòng)播放：

• 音頻被靜音或其音量設(shè)置為 0
• 用戶和網(wǎng)頁(yè)已有交互行為（包括點(diǎn)擊、觸摸、按下某個(gè)鍵等等）
• 網(wǎng)站已被列入白名單；如果瀏覽器確定用戶經(jīng)常與媒體互動(dòng)，這可能會(huì)自動(dòng)發(fā)生，也可能通過(guò)首選項(xiàng)或其他用戶界面功能手動(dòng)發(fā)生
• 自動(dòng)播放策略應(yīng)用到<iframe>或者其文檔上

? 否則，播放可能會(huì)被阻止。導(dǎo)致播放被阻塞的確切情況以及將網(wǎng)站列入白名單的具體方法因?yàn)g覽器而異，但最好是遵循以上的原則。

? 詳情，請(qǐng)參閱?Google Chrome?和?WebKit?的自動(dòng)播放政策。

解決方案

? 考慮到音頻上可能還會(huì)有其他操作，選擇第二種方案。如何知道自動(dòng)播放失敗了呢？其實(shí)自動(dòng)播放失敗時(shí)不會(huì)觸發(fā)任何事件，也沒有拋出異?；蚧卣{(diào)。那么便不能依賴autoplay。而是使用play函數(shù)模擬自動(dòng)播放，play函數(shù)執(zhí)行時(shí)會(huì)返回一個(gè)promise，可以根據(jù)promise來(lái)判斷當(dāng)前的播放是成功了還是失敗了，并且在失敗后做出相應(yīng)的提示。

    // 頁(yè)面加載事件中執(zhí)行 this.playWarn()


    // 提示音彈窗，需要用戶手動(dòng)點(diǎn)一次才可以讓瀏覽器播放音頻
    applyPlayConfirm() {
      const audio = document.querySelector("audio");
      this.$confirm("請(qǐng)開啟本次報(bào)警聲音提醒", "提示", {
        type: "info",
        showClose: false,
        showCancelButton: false,
        closeOnPressEscape: false,
        closeOnClickModal: false,
        confirmButtonText: "確定",
        callback: () => {
          // 用戶點(diǎn)擊過(guò)后 即可播放
          audio.play();
        },
      });
    },

    // 申請(qǐng)播放音頻，只需用戶點(diǎn)擊頁(yè)面任意位置
    playWarn() {
      const audio = document.querySelector("audio");
      let startPlayPromise = audio.play();
      if (startPlayPromise !== undefined) {
        startPlayPromise
          .catch((error) => {
            if (error.name == "NotAllowedError") {
              this.applyPlayConfirm();
            } else {
              // Handle a load or playback error
            }
          })
          .then(() => {
            // Start whatever you need to do only after playback
          });
      }
    },

閱讀：

MEI 媒體參與度索引

在以chorme為內(nèi)核的瀏覽中，設(shè)置了MEI（Media Engagement Index）列表，該列表長(zhǎng)度為1000，用來(lái)來(lái)衡量用戶是否是該網(wǎng)站的“忠實(shí)用戶”。當(dāng)MEI排名足夠高時(shí)，即可自動(dòng)播放。

MEI衡量個(gè)人在網(wǎng)站上消費(fèi)媒體的傾向。Chrome?當(dāng)前的做法是每個(gè)來(lái)源的訪問次數(shù)與重要媒體播放事件的比率：

• 媒體（音頻/視頻）的消耗必須大于7秒。
• 音頻必須存在且不能靜音。
• 帶有視頻的標(biāo)簽處于活動(dòng)狀態(tài)。（個(gè)人感覺是不能設(shè)置display: none, visibility: hidden等）
• 視頻大小（以px為單位）必須大于200x140。

由此，Chrome計(jì)算出的媒體參與度得分在定期播放媒體的網(wǎng)站上足夠高時(shí)，允許在桌面上自動(dòng)播放媒體播放。

可以在chrome://media-engagement 內(nèi)部頁(yè)面上找到用戶的MEI 。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-705458.html

到了這里，關(guān)于前端實(shí)現(xiàn)頁(yè)面自動(dòng)播放音頻方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！