Vue文字转语音实现

寒寒_2024-12-05 15:49

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

一、安装

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

二、使用

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

javascript 复制代码

// 第一步
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("读取成功");
        });
    },

三、注意事项

如果需要取消播放，可调用 speech.cancel()
setLanguage()可设置语言类型，输入文本需与之对应【中文有 zh-CN、zh-TW、zh-HK ，自行按需设置】
想过更改音色，但没成功，望成功的伙伴们告知一声。