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

已于 2023-07-04 23:28:15 修改
阅读量4.8k 收藏 8
点赞数 2
分类专栏： 大前端 文章标签： 前端 react vue javascript
于 2023-07-04 23:16:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/this_zq/article/details/131545254
版权

在这里插入图片描述

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>
  • 第二种解决方案就是用其他第三方的库，不过基于浏览器的安全限制，可能也会存在无法在后台自动播放的情况，所以这里还是没有采用其他第三方的库。

3 参考链接

官方文档：

​ https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesis

其他小伙伴的博客：

​ https://blog.csdn.net/pridas/article/details/119097189

​ https://blog.csdn.net/qq_47247479/article/details/126933326

4 源码地址

https://github.com/JACK-ZHANG-coming/frontEnd-all-knowledge/tree/master/examples/funnyDemo/a05%E8%AF%AD%E9%9F%B3%E6%92%AD%E6%8A%A5%E5%8A%9F%E8%83%BD

如果屏幕前的小伙伴有什么好的解决方案也可以分享一下哦

潜心专研的小张同学
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
谷歌浏览器90版本无法播放语音问题解决
xixisi888的博客
06-05 2671
背景：Vue项目需要在页面播放语音功能。谷歌浏览器升级后无法播放。 谷歌浏览器警告提醒： speechSynthesis.speak() without user activation is no longer allowed since M71, around December 2018. See https://www.chromestatus.com/feature/5687444770914304 for more details 解决办法： ...
speechSynthesis.speak()在chrome不执行问题
pridas的博客
07-26 9177
现象： 其他支持此功能的浏览器正常，但chrome无声音，也没有执行speechSynthesisUtterance.onstart()方法。 大概推测的原因： 1. 打印window.speechSynthesis.getVoices()返回信息，可发现chrome比其他浏览器多了Google XX等一系列voice： 2. 在未对speechSynthesisUtterance设置voice时，会默认根据speechSynthesisUtterance.lang判断使用哪个；而spee.
speechSynthesis实现语音播报功能
最新发布
qq_42727641的博客
06-14 195
chrome://settings/content/sound 配置一下想要自动播放声音的网址。由于chrome安全机制，无法自动播放，必须在用户交互之后才可以自动播放。
语音读文字 window.speechSynthesis.speak (谷歌浏览器无声音解决)
2301_77474196的博客
07-27 1304
此处添加你要自动播放声音的网址即可。
使用谷歌浏览器的语音播报功能时发现不能播放
qq_36001082的博客
09-19 3973
使用谷歌浏览器的语音播报功能时发现不能播放 <script> if(!('speechSynthesis' in window)) { throw alert("对不起，您的浏览器不支持") } setTimeout(()=> { play() },2000) function play(){ var mess = '搜狗[1] 是搜狐公司的旗下子公司，于2004年8月3日推出，目的是增强搜狐网的搜索技能，主要经营搜狐公司的搜索业务。在搜索业务
JavaScript文字转语音_SpeechSynthesisUtterance语音合成的使用
web前端开发
12-14 4149
在做项目的过程中，遇到场景是客户要求播放语音的场景，这里需要js来实现文字转语音播放的功能。在不使用第三方API接口（这种方式需要外网），能想到的也就是利用html5的个API：Speec...
网页语音合成API运行无效果问题处理
Mr.CJ
09-13 4213
网页语音合成api不起作用的情况
浏览器播放语音SpeechSynthesisUtterance
qq_32439381的博客
10-25 9679
目的：因为公司项目需要来浏览器播放语音，看了科大讯飞的产品，后面有发现html5有原生的api，更加方便，所以使用了 一、语音合成和语音识别 “语音识别(Speech Recognition)”目前的就Chrome浏览器和Opera浏览器默认支持，但是，“语音合成(Speech Synthesis)”的兼容性要好上太多了Chrome，FF，Edge，Safari等等都是支持的。 二...
HTML5语音合成功能
小小陈的博客
04-22 1482
这篇文章主要介绍了HTML5语音合成功能的实现代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧 可将该代码复制到chrome控制台中体验 let msg = new SpeechSynthesisUtterance("欢迎你阅读我的博客"); window.speechSynthesis.speak(msg); SpeechSyntehesisUtteranc 这个语音合成功能是HTML5的特性，其中也有一些属性是可配置的 let msg = new .
SpeechSynthesisRecorder:从window.speechSynthesis.speak（）调用中获取音频输出，如ArrayBuffer，AudioBuffer，Blob，MediaSource，MediaStream，ReadableStream，其他对象或数据类型
04-29
$ npm install --save speech-synthesis-recorder 用法 在navigator.mediaDevices.getUserMedia()提示符下，选择“ Monitor of Built-in Audio Analog Stereo选项，而不是“ Built-in Audio Analog
解决电脑无语音播报问题.zip
06-11
在电脑使用过程中，有时会遇到无语音播报的问题，这可能是由于操作系统中缺少必要的语音合成引擎或者相关组件。本文将详细探讨如何通过Java编程语言解决这一问题，并介绍涉及到的关键技术，包括SAPI.SpVoice、Jacob...
支持多种浏览器的纯js语音播报功能.rar
12-11
要实现这样的功能，首先我们需要了解Web Speech API，这是现代浏览器内置的一个功能，包括`SpeechSynthesis`接口，用于文本到语音（TTS，Text-to-Speech）转换。这个API允许JavaScript程序生成并控制语音输出，无需...
纯js实现的语音播报无需第三方接口
11-23
纯JS实现的语音播报是利用了浏览器内置的Web Speech API，通过创建和操作`SpeechSynthesisUtterance`对象，我们可以控制语音的发音、速度、音调等特性，无需依赖任何第三方服务，实现了一种自给自足的文本转语音方案...
基于安卓原生的TextToSpeech和讯飞API实现的语音播报
09-22
本文将深入探讨如何基于安卓原生的TextToSpeech（TTS）服务以及科大讯飞的语音API实现中文语音播报。 首先，我们来了解安卓原生的TextToSpeech（TTS）服务。TextToSpeech是Android系统提供的一个用于将文本转换成...
html5的个API：SpeechSynthesis语音合成的使用
baroncoder的博客
09-07 1917
通过voiceschanged事件来动态获取支持的语言种类,并生成options添加到html中.其中最主要的方法就是synth.getVoices()获取.各位可以通过自行打印获取到的数组查看具体包含的属性。在播放前通过voicesDropdown.selectedOptions[0].value来设置文本的语言(这里如果文本的内容语言和播报选择的语言不一致的话会出现乱读的情况)。创建按钮点击事件,分别通过synth.speak(msg)和synth.cancel(msg)来播放和取消播放。
html识别文字转语音,Speech Synthesis API入门 - web前端识别文字转语音
weixin_28688385的博客
06-02 745
Speech Synthesis API非常容易实现。事实上，只需两行代码即可让您的网络应用与用户交流。constmsg=newSpeechSynthesisUtterance("helloworld");window.speechSynthesis.speak(msg);speechSynthesis 接口speak(SpeechSynthesisUtterance)- 这个方法应该传...
speechSynthesis没有声音
qq_45558339的博客
05-24 9239
目录前言问题解决思路1. 首先从代码中寻找答案，常用的speechSynthesis合成代码如下2. 分析3.解决下载需要的文件 前言 本片文章首先针对的问题是[前端使用speechSynthesis合成声音，但是无法播放出声音的问题解决方案]，目前所知道的出现问题的前提条件如下： 1、电脑系统为win7 2、浏览器不限制（google浏览器版本89前可以，89后需要使用其它解决方案） 问题解决思路 1. 首先从代码中寻找答案，常用的speechSynthesis合成代码如下 var utterThis =
文字转语音：语音合成(Speech Synthesis) 数组文字循环播放
IT博客技术分享
10-07 2178
HTML5中和Web Speech相关的API实际上有两类，一类是“语音识别(Speech Recognition)”，另外一个就是“语音合成(Speech Synthesis)”， 这两个名词实际上指的分别是“语音转文字”，和“文字变语音”。
html谷歌浏览器实现自动播报语音,vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上...
05-25
1. 实现自动播报语音 在 HTML 中，可以使用 `SpeechSynthesis` API 来实现自动播放语音。这个 API 提供了一些方法和事件，可以控制语音的播放和暂停。 下面是一个简单的例子： ```javascript // 创建 SpeechSynthesisUtterance 对象 const msg = new SpeechSynthesisUtterance(); msg.text = 'Hello world!'; // 播放语音 window.speechSynthesis.speak(msg); ``` 在谷歌浏览器中，需要用户授权才能使用 `SpeechSynthesis` API。可以在用户点击页面时触发语音播放，然后请求授权。 ```javascript document.addEventListener('click', () => { // 请求授权 window.speechSynthesis.requestPermission().then(() => { // 创建 SpeechSynthesisUtterance 对象 const msg = new SpeechSynthesisUtterance(); msg.text = 'Hello world!'; // 播放语音 window.speechSynthesis.speak(msg); }); }); ``` 2. 解决 Chrome 浏览器自动播放音频问题 在 Chrome 浏览器中，自动播放音频是被禁止的，需要用户手动操作才能播放。为了解决这个问题，可以在用户的交互事件中触发音频的播放。 在 Vue 中，可以在 `mounted` 生命周期中监听 `click` 事件，然后触发音频播放。 ```vue <template> <div> <button @click="playAudio">Play Audio</button> </div> </template> <script> export default { mounted() { // 监听点击事件 document.addEventListener('click', this.playAudio); }, beforeDestroy() { // 移除监听事件 document.removeEventListener('click', this.playAudio); }, methods: { playAudio() { // 创建音频对象 const audio = new Audio('/path/to/audio.mp3'); audio.play(); }, }, }; </script> ``` 3. 将 MP3 语音打包到线上 可以使用 Webpack 的 `file-loader` 来打包 MP3 文件。 首先，需要在 Vue 项目中安装 `file-loader`： ```bash npm install file-loader --save-dev ``` 然后，在 Webpack 配置文件中添加 loader： ```javascript module.exports = { module: { rules: [ { test: /\.(mp3)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'audio/', }, }, ], }, ], }, }; ``` 这个配置表示，当 Webpack 遇到 `.mp3` 文件时，会使用 `file-loader` 加载文件，并将文件打包到 `audio/` 目录下。 在 Vue 组件中使用打包后的 MP3 文件： ```vue <template> <div> <button @click="playAudio">Play Audio</button> </div> </template> <script> export default { methods: { playAudio() { // 创建音频对象 const audio = new Audio('/audio/audio.mp3'); audio.play(); }, }, }; </script> ```
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值