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=**:这个就是你要转换的文字。

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值