Chrome浏览器不支持用户无交互自动播放语音问题的解决

王摆摆
3,097 阅读2分钟

chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频.不光是这样,在页面加载完毕的情况下,用户没有click.dbclick.touch等主动交互行为,使用js直接调用.play() 方法的话,chrome都会抛出如下错误: Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.

如果用户已经与系统进行过交互，则可以进行自动播放。但是当用户长时间无交互，则无法通过websock获取到的消息进行自动语音播报。

方法一、使用iframe的方式进行语音播放。

以下是vue的部分代码

<template>
  <div id="cam">
    <iframe
        :src="url"
        frameborder="0"
        wmode="transparent | window"
        style="opacity: 0.0.1;"
        v-if="isAudio"
        ref="audio"
        auto preload="auto"
    ></iframe>
  </div>
</template>
export default {
  name: "audioPlay",
  data() {
    return {
      url: '',
      isAudio: false,
    };
  },
  mounted() {
      setTimeout(() => {
          console.log('play');
          this.url = "https://tts.baidu.com/text2audio?cuid=baike&spd=5&lan=ZH&ctp=1&pdt=301&vol=4&rate=32&per=0&tex=' "+ encodeURI('小朋友，你是否有很多问号');
          this.isAudio = true
    }, 3000)
  },

运行代码，在用户无交互的情况下，三秒后将自动播放语音。

方法二

解决了语音播报的问题以后，根据业务需要，可能会有一些不能连通外网或者网络状态不好的情况，经过一系列的检索后找到一个好东西

SpeechSynthesisUtterance是HTML5中新增的API，用于将指定文字合成为对应的语音。也包含一些配置项，指定如何去阅读(语言、音量、音调)等

1.方法
  • speak() 将对应的实例添加到语音队列中
  • cancel() 删除队列中所有的语音。如果正在播放，则直接停止
  • pause() 暂停语音
  • resume() 恢复暂停的语音
  • getVoices 获取支持的语言数组。 注意:必须添加在voiceschanged事件中才能生效
2.回调事件
  • onstart 语音合成开始时候的回调。
  • onpause 语音合成暂停时候的回调。
  • onresume 语音合成重新开始时候的回调。
  • onend 语音合成结束时候的回调。
speechSynthesis.speak(new SpeechSynthesisUtterance("小朋友，你是否有很多问号"));

无需iframe，通过这一行代码就能解决浏览器的语音限制问题了

最后，还有一点需要注意，如果你运行了上述代码没有实现语音的播放，需要检查浏览的声音设置，需要将声音由自动(默认)或者静音改为允许才能播放声音

avatar
文章
阅读
粉丝