浏览器自带api语音播报speechSynthesis.speak()无法自动播报问题分析及非完美解决方案

2023年6月 · 预计阅读时间： 2 分钟

在这里插入图片描述

1 需求描述#

最近遇到一个需求，就是前端页面要实时监听后端传过来的数据，同时当后端传过来这条数据时前端界面要语音播报这条数据。

2 分析与解决方案#

这里主要说说语音播报的部分。本来觉得用浏览器自带的 API 来实现直接写一句话就 ok 了，但是没想到居然有一个 bug。那就是这条语音有时候能播报，有时候就没有声音了？为什么呢，查了半天，是浏览器的安全限制的问题，需要用户交互才能播放声音，这个问题困扰了一两天，找到了如下两条解决方案：

第一个就是用按钮点击，当我们播报声音时，第一次播报必须得是用户用交互动作操作才行，显然我这里不能让用户点击，因为它是后台自动播报的，嘿嘿，这可难不到我，写了个模拟按钮点击事件，就 ok 啦~

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>语音播报</title>
  </head>
  <body>
    <h3>点击下方按钮可以进行语音播报</h3>
    <hr />
    <button onclick="areSpeak('哈哈哈哈哈，这是声音~')">播放声音</button>&nbsp;&nbsp;<button onclick="beQuiet()">停止播放</button>
  </body>
  <script>
    //#region 语音播报封装
    const areSpeak = newMsg => {
      // 初次播报使用模拟按钮触发
      virtualClick(SpeakVoice)
      speakWithDelay(newMsg)
    }

    /**
     * 语音播报
     * @param msg 播报的信息
     */
    const SpeakVoice = (msg = '') => {
      const speech = new SpeechSynthesisUtterance(msg)
      // 设置兼容中文
      const voices = window.speechSynthesis.getVoices()
      speech.voice = voices.filter(function (voice) {
        return voice.localService == true && voice.lang == 'zh-CN'
      })[0]
      window.speechSynthesis.speak(speech)
    }

    /**
     * 语音播报 带延迟 异步
     * 搭配async await
     * @param msg 播报的信息
     */
    const speakWithDelay = (utterance, delay = 1000) => {
      return new Promise(resolve => {
        const speech = new SpeechSynthesisUtterance(utterance)
        // 设置兼容中文
        let voices = window.speechSynthesis.getVoices()
        speech.voice = voices.filter(function (voice) {
          return voice.localService == true && voice.lang == 'zh-CN'
        })[0]
        speech.onend = () => {
          setTimeout(resolve, delay)
        }
        window.speechSynthesis.speak(speech)
      })
    }

    /**
     * 模拟按钮点击
     * @param callback
     */
    const virtualClick = callback => {
      let button = document.createElement('button')
      button.textContent = '点击我'

      // 添加点击事件处理程序
      button.addEventListener('click', function () {
        console.log('按钮被点击了')
        callback && callback()
      })

      // 模拟用户点击事件
      let event = new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true
      })
      button.dispatchEvent(event)
    }

    const beQuiet = () => {
      console.log('停止')
      window.speechSynthesis.cancel()
      SpeakVoice('')
    }
    //#endregion
  </script>
</html>