项目场景：

   系统需要使用要语音播放功能，就是点击内容进行语音播放，但是是岛国语音，国内基本上都是中文，所以可能会遇到些许问题

---

问题描述

遇到的问题：

1.安装的时候不能安装，npm报错（里面的报错，我这边是vue-speech的报错，其实意思是一样的）。

PS D:\systemProject\riyu\ui> npm i spark-tts
npm ERR! code CERT_HAS_EXPIRED
npm ERR! errno CERT_HAS_EXPIRED
npm ERR! request to https://registry.npm.taobao.org/vue-speech failed, reason: certificate has expired

npm ERR! A complete log of this run can be found in: D:\node\node_cache\_logs\2024-01-23T02_31_12_928Z-debug-0.log

解决：重新配置一个代理就好了

2. 使用除中文以为的语言报错（国内如果只是播放中文语音是不会出现的）

speak-tts.js:133 Uncaught Error setting voice. 
The voice you passed is not valid or the voices have not been loaded yet.

解决：

（1） 点击电脑的日期时间

（2）来到语言这里=》添加语言

（3）选择一个语种后=》安装，不用选设置为显示语言，如果你看得懂当我没说

 （4）等待安装好就可以了，之后要把浏览器进程关闭再打开

---

speak-tts的使用：

1.下载可以通过npm下载

npm install speak-tts

2.在组件中引入

import Speech from "speak-tts";

3.需要定义一个初始变量用来存储

 data() {
    return {
      speech: null,
        //渲染数据
       wordList:[{ word:'てんどう万象',}]
    };
  },

4.在mounted里做初始化

mounted() {
    this.SpeechInit();
  },

methods: {
    SpeechInit() {
      this.speech = new Speech();
      this.speech.setLanguage("ja-JP");
      this.speech.init().then(() => {});
    },
    //播放按钮
    play(data) {
      this.speech
        .speak({
          text: data,
          listeners: {
            //开始播放
            onstart: () => {
              console.log("Start utterance");
            },
            //判断播放是否完毕
            onend: () => {
              console.log("End utterance");
            },
            //恢复播放
            onresume: () => {
              console.log("Resume utterance");
            },
          },
        })
        .then(() => {
          console.log("读取成功");
        });
    },
    //暂停
    paused() {
      this.speech.pause();
    },
    //从暂停处继续播放
    goahead() {
      this.speech.resume();
    },
    //点击播放按钮
    setdefaultWordData(data) {
      this.play(data)
    },
}

5.模版中样式

<el-button type="primary" v-for="(item, index) in wordList" :key="index" @click="setdefaultWordData(item.word)">{
   
   { item.word }}</el-button>