vue 自动播放语音

应用背景：进入页面后 根据当前最大风速值判断是否超过预警值， 超过 则 自动播放安全警告。
网上搜了很多很多方法 都不行。

video.play();
直接调用 会报错  Uncaught (in promise) DOMException: play()

原因：
Chrome只允许用户对网页进行主动触发后可自动播放音频和视频。Chrome不允许在用户对网页进行触发之前播放音频，而视频其实是不受限制的。但因为视频文件同样包含了音频，所以也一同被禁止了。Chrome这样做的目的是为了防止开发者滥用自动播放功能而对用户产生骚扰。

比较多的方法：

浏览器输入 chrome://flags/#autoplay-policy
第一个选项 Autoplay policy 设置为 no user gesture is required
然而 现在 设置里并没有这一项 所以也不行

只有这个最接近，前提是用户点击了页面任意操作。

<template>
....省略
          <div v-show="false">
            <audio id="video" autoplay="autoplay" muted ref="video">
              <source
                src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=7&text=警告，风速已超阀值"
              />
              <embed height="0" width="0" src="" />
            </audio>
          </div>
 ...省略
</template>

<script>
import { mapActions, mapState } from "vuex";
import $ from "jquery";
// 用户必须点击页面任意操作
$(document).click(() => {
  document.getElementById("video");
});
export default {
  data() { return {
     thresholdVal: 0,
	 viewNum: 0,
  },
   },
 computed: {
    ...mapState({
      speedList: state => state.speedList,
      speedloading: state => state.speedloading
    })
  },
  mounted() {
   const me = this;
   let params = {
     method: "GetThreshold",
     content: ""
    };
   //调用后台 获取设置的最大阀值
     this.getFsApi({
      params,
      callback: res => {
        if (res.code === "Y") {
          me.viewNum = res.content;
          me.thresholdVal = me.viewNum;
        }
      }
    });
    //根据自身业务需求    最大风速超过设置的阀值
    this.initSpeed({
      callback: maxSpeed => {
        if (maxSpeed > me.viewNum) {
          if (this.$refs.video) {
            this.$refs.video.play();   //主要是这里 在页面被用户任意点击后 此时就可以随时调用
          }
        }
      }
    });
  },
   methods: {
     ...mapActions(["initSpeed","getFsApi"]),
   }
  }
</script>

这里是调用 百度接口

http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=播放文字内容

接口参数说明：

lan=zh：语言是中文，如果改为lan=en，则语言是英文。

ie=UTF-8：文字格式。

spd=2：语速，可以是1-9的数字，数字越大，语速越快。

text=**：这个就是你要转换的文字。