Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击

小鱼儿 2023-10-01 15:56 18阅读 0赞

## 场景 ##

Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)：

[Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Vue_speak-tts_TTS_BADAO_LIUMANG_QIZHI_-CSDN]

在上面可以实现在360极速浏览器中自动播放音频正常，但是在Chrome浏览器中，如果

没有任何事件触发的情况下不会自动播放。

为什么不能实现自动语音播报。

chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。

严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频。

不光是这样，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，

使用js直接调用.play() 方法的话，chrome都会抛出如下错误：Uncaught (in promise) DOMException；

can-autoplay插件：

[can-autoplay - npm][]

可以检测浏览器是否支持自动播放音频和视频。

注：

博客：  
[BADAO\_LIUMANG\_QIZHI的博客\_霸道流氓气质\_CSDN博客-C\#,SpringBoot,架构之路领域博主][BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

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、运行在谷歌浏览器中，如果刷新后没有任何交互事件则会提示，如果有则不提示

![dda19b05fa054b189d0d216a35dedbb1.gif][]

7、运行在360极速浏览器中刷新之后即使没有任何事件，也能支持自动播放，不会弹出提示。

![36325a4f1d1a4282b17c48dd77c016dd.gif][]

[Vue_speak-tts_TTS_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122584289
[can-autoplay - npm]: https://www.npmjs.com/package/can-autoplay
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[dda19b05fa054b189d0d216a35dedbb1.gif]: https://img-blog.csdnimg.cn/dda19b05fa054b189d0d216a35dedbb1.gif
[36325a4f1d1a4282b17c48dd77c016dd.gif]: https://img-blog.csdnimg.cn/36325a4f1d1a4282b17c48dd77c016dd.gif