Vue文字转语音实现

原创已于 2024-12-10 11:09:15 修改 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#语音识别

于 2024-12-02 13:29:42 首次发布

Vue2 专栏收录该内容

21 篇文章

订阅专栏

在开发流程中，面对语音支持的需求，小规模语音内容或许可以通过预处理后播放来轻松应对，但当涉及大量语音时，这一方法就显得繁琐低效了。为此，智慧的开发者们总能找到便捷的解决方案——利用Web技术实现语音播放，既高效又省力。那么该怎么实现呢，请跟随我的脚步看看吧。

一、安装

借助 speak-tts插件，实现语音播放。

二、使用

在需要使用的地方引入speak-tts
初始化speak-tts
调用speak()方法将文字转语音并输出

// 第一步
import Speech from "speak-tts";

//第二步 我是全局注册的
    speechInit() {
      window.speech = new Speech();
      speech.setLanguage("zh-CN");
      speech.setPitch(1.5);
      speech.init().then(() => {});
    },

// 第三步 播放方法
    playVoice(text) {
      speech
        .speak({
          text: text,
          listeners: {
            //开始播放
            onstart: () => {
              console.log("播放开始");
            },
            //判断播放是否完毕
            onend: () => {
              console.log("播放结束");
            },
            //恢复播放
            onresume: () => {},
          },
        })
        .then(() => {
          // console.log("读取成功");
        });
    },