Vue中使用can-autoplay插件實現瀏覽器不支持自動播放音頻時提示點擊

場景

Vue中使用speak-tts插件實現點擊按鈕后進行語音播報(TTS/文字轉語音)：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122584289

在上面可以實現在360極速瀏覽器中自動播放音頻正常，但是在Chrome瀏覽器中，如果

沒有任何事件觸發的情況下不會自動播放。

為什么不能實現自動語音播報。

chrome瀏覽器在18年4月起，就在桌面瀏覽器全面禁止了音視頻的自動播放功能。

嚴格地來說，是Chrome不允許在用戶對網頁進行觸發之前播放音頻。

不光是這樣，在頁面加載完畢的情況下，用戶沒有click、dbclick、touch等主動交互行為，

使用js直接調用.play() 方法的話，chrome都會拋出如下錯誤：Uncaught (in promise) DOMException；

can-autoplay插件：

https://www.npmjs.com/package/can-autoplay

可以檢測瀏覽器是否支持自動播放音頻和視頻。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、插件安裝

npm install can-autoplay

2、插件引入

import canAutoPlay from 'can-autoplay';

3、檢測是否支持自動播放

      canAutoPlay.audio().then(({ result }) => {
        //支持自動播放
     
        } else {
        
        }
      });

4、用法示例

      //檢測是否支持媒體自動播放
      canAutoPlay.audio().then(({ result }) => {
        //支持自動播放
        if (result === true) {
          this.speech
            .speak({ text: "叮叮當 叮叮當 響了響叮當" })
            .then(() => {});
        } else {
          this.$alert(
            "檢測到您的瀏覽器不支持媒體自動播放，是否同意播放音頻",
            "提示",
            {
              confirmButtonText: "確定",
              callback: (action) => {
                this.audio.play();
              },
            }
          );
        }
      });

5、完整示例代碼

<template></template>
<script>
import Speech from "speak-tts"; // es6
import canAutoPlay from 'can-autoplay';
export default {
  name: "audioAutoPlay",
  data() {
    return {
      speech: null,
    };
  },
  mounted() {
    //初始化speakTTS插件
    this.speechInit();
    //定時器模擬播報
    setInterval(() => {
      //檢測是否支持媒體自動播放
      canAutoPlay.audio().then(({ result }) => {
        //支持自動播放
        if (result === true) {
          this.speech
            .speak({ text: "叮叮當 叮叮當 響了響叮當" })
            .then(() => {});
        } else {
          this.$alert(
            "檢測到您的瀏覽器不支持媒體自動播放，是否同意播放音頻",
            "提示",
            {
              confirmButtonText: "確定",
              callback: (action) => {
                this.audio.play();
              },
            }
          );
        }
      });
    }, 5000);
  },
  methods: {
    //初始化speakTTS插件
    speechInit() {
      this.speech = new Speech();
      this.speech.setLanguage("zh-CN");
      this.speech.init().then(() => {});
    },
  },
};
</script>

<style scoped>
</style>

6、運行在谷歌瀏覽器中，如果刷新后沒有任何交互事件則會提示，如果有則不提示

 

 

7、運行在360極速瀏覽器中刷新之后即使沒有任何事件，也能支持自動播放，不會彈出提示。