Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)

ゝ一世哀愁。 2023-10-01 15:41 9阅读 0赞

## 场景 ##

### speak-tts插件 ###

[speak-tts - npm][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

实现点击按钮触发语音播报，播报指定的文字内容。

为什么不能实现自动语音播报。

chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。

严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频。

不光是这样，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，

使用js直接调用.play() 方法的话，chrome都会抛出如下错误：Uncaught (in promise) DOMException；

注：

博客：  
[BADAO\_LIUMANG\_QIZHI的博客\_霸道流氓气质\_CSDN博客-C\#,SpringBoot,架构之路领域博主][BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、参考官方说明安装依赖

npm install speak-tts

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

2、在页面中引入

import Speech from 'speak-tts'

3、声明speech对象

data() {
        return {
          speech: null,
        };

4、页面加载完调用初始化方法

mounted() {
        this.speechInit();
      },
      methods: {
        speechInit() {
          this.speech = new Speech();
          this.speech.setLanguage("zh-CN");
          this.speech.init().then(() => {});
        },

5、页面添加按钮

<el-button type="success" @click="speakTtsSpeech">speak-tts语音播报</el-button>

6、按钮点击事件中调用播放方法

speakTtsSpeech() {
          this.speech.speak({ text: "公众号:霸道的程序猿" }).then(() => {
            console.log("读取成功");
          });
        },

7、完整示例代码

<template>
      <el-button type="success" @click="speakTtsSpeech">speak-tts语音播报</el-button>
    </template>
    <script>
    import Speech from "speak-tts"; // es6
    export default {
      name: "SpeechDemo",
      data() {
        return {
          speech: null,
        };
      },
      mounted() {
        this.speechInit();
      },
      methods: {
        speakTtsSpeech() {
          this.speech.speak({ text: "公众号:霸道的程序猿" }).then(() => {
            console.log("读取成功");
          });
        },
        speechInit() {
          this.speech = new Speech();
          this.speech.setLanguage("zh-CN");
          this.speech.init().then(() => {});
        },
      },
    };
    </script>
    
    <style scoped>
    </style>

[speak-tts - npm]: https://www.npmjs.com/package/speak-tts
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/3fa1a392c6074325b11d22f343e9d2af.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/9f4d00d0318b42b99fe623913ad50851.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16