tom-s / speak-tts

80 stars 20 forks source link

首次打开页面 调用 .speech.speak() 不播放,点击事件触发.speech.speak() 可以播放, 调用 hasBrowserSupport方法会提示浏览器不支持 #36

Open zhaoyls opened 5 months ago

zhaoyls commented 5 months ago

首次打开页面 调用语音不播放, 调用 hasBrowserSupport方法会提示浏览器不支持,但是用用点击事件去调用播放方法,又可以播放。具体代码如下, vue中created中调用初始化的方法去播报,经常首次打开会失效。


  created() {
    this.speechInit()
  },
    speechInit() {
      this.speech = new Speech();
      this.$nextTick(() => {
        if (this.speech.hasBrowserSupport()) {
          console.log("speech synthesis supported")
          this.$message.error("该浏览器不支持语音播报!");
        }
      })
      this.speech.setLanguage("zh-CN");
      this.speech.init().then(() => { });
      this.speakTtsSpeech('测试语音关闭效果。')
      setTimeout(() => {
        this.speakTtsSpeechStop()
      }, 1000)
    },

   speakTtsSpeech(msg) {
      this.speech.speak({
        text: msg,
        listeners: {
          onstart: () => {
            console.log("开始播放");
          },
          onend: () => {
            console.log("播放完毕");
          },
          onresume: () => {
            console.log("恢复播放");
          },
        },
      }).then(() => {
        console.log("语音播报成功");
      });
    },
}