场景

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

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

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

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

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

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

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

can-autoplay插件：

​can-autoplay - npm​

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

注：

关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现
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极速浏览器中刷新之后即使没有任何事件，也能支持自动播放，不会弹出提示。

<template>
  <div>
    <audio controls="controls" :src="sound" ref="audio" muted ></audio>
  </div>
</template>
<script>
import Speech from "speak-tts"; // es6
import canAutoPlay from 'can-autoplay';
import sounds from '@/assets/img/sound/ts.mp3';
export default {
    name: "audioAutoPlay",
    data() {
        return {
            speech: null,
            sound: sounds,
        };
    },
    mounted() {
        let that=this
        //初始化speakTTS插件
       // this.speechInit();
        //定时器模拟播报
        setInterval(() => {
            //检测是否支持媒体自动播放
            canAutoPlay.audio().then(({ result }) => {
                //支持自动播放
                console.log(result)
                if (result === true) {
                    this.$refs.audio.currentTime = 0;
                    this.$refs.audio.play();
                    //   this.speech
                    //     .speak({ text: "叮叮当 叮叮当 响了响叮当" })
                    //     .then(() => {});
                } else {
                    this.$alert(
                        "检测到您的浏览器不支持媒体自动播放，是否同意播放音频",
                        "提示",
                        {
                            confirmButtonText: "确定",
                            callback: () => {                      
                                that.$refs.audio.play();
                            },
                        }
                    );
                }
            });
        }, 1000);
    },
    methods: {
        //初始化speakTTS插件
        speechInit() {
            this.speech = new Speech();
            this.speech.setLanguage("zh-CN");
            this.speech.init().then(() => {});
        },
    },
};
</script>

<style scoped>
</style>

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