vue2使用speak-tts实现语音播报

最近的项目中有一个需求是实现vue2页面中语音播报页面内容，自己从网上搜了不少例子，摸索着也算是做出来了，今天这个文章就来讲讲speak-tts的使用 首先，引入文件包

npm install speak-tts

在需要语音播报的页面内引入

import Speech from "speak-tts";

代码如下

 mounted() {
 //挂载完成后直接初始化，缺少这一步的话会报错一定注意
    this.speechInit();
  },
   destroyed() {
   // 退出页面时，关闭语音播报
      console.log("销毁页面");
      this.speech.cancel();
    },
// 初始化语音播报
    speechInit() {
      this.speech = new Speech();
      this.speech.setLanguage("zh-CN");
      this.speech.init().then(() => {});
    },
    
       // 语音播报
    speakText() { // 这里是页面内使用click点击事件调用
      this.speech
        .speak({
          text: this.speaking,  //此处加入需要语音播报的内容，我这里是用来请求来的数据所以是变量
          listeners: {
            //开始播放
            onstart: () => {
              console.log("开始播放");
            },
            //判断播放是否完毕
            onend: () => {
              console.log("播放完毕");
            }, //恢复播放
            onresume: () => {
              console.log("恢复播放");
            },
          },
        })
        .then(() => {
          console.log("成功");
        });
    },

因为我这个项目中需要语音播报的页面是后端直接传给我的富文本页面，所以一开始打算用过滤器将富文本内的标签过滤出来，就有了一下的代码

 filters: {
    filtersText(val) {
      // 要判断一下,如果是空就返回空字符串,不然会报错
      if (val != null && val != "") {
        var reg = /[\u4e00-\u9fa5]/g;
        var names = val.match(reg);
        val = names.join("");
        // this.speaking = val
        return val;
      } else return "";
    },
  },

但是过后发现，在过滤其中使用this指向的是window而不是vm，所以会报错underfined，所以就需要computed计算属性属性，将需要转换的值直接放入

changeType() {
      if (this.speaking != null && this.speaking != "") {
        var reg = /[\u4e00-\u9fa5]/g;
        var names = this.speaking.match(reg);
        this.speaking = names.join("");
        // this.speaking = this.speaking
        return this.speaking;
      }
    },