vue使用WEB自带TTS实现语音文字互转

前言

时隔多日，自己已经好久没更新文章了；今年一直跟随公司的政策[BEI YA ZHA]中，做了一个又一个的需求，反而没有多少自己的时间，更别说突破自己

˚‧º·(˚ ˃̣̣̥᷄⌓˂̣̣̥᷅ )‧º·˚（雾）

然后最近，我朋友突然和我说有没有做过TTS，我第一反应是???

ʕ •ᴥ•ʔ……

一脸无辜

于是就出现我们今天主题的

什么是TTS？

去调查了一番，简单的说就是一种语音文本互转的技术

• 这里涉及到语音合成的概念.语音合成是通过机械的、电子的方法产生人造语音的技术。TTS技术（又称文语转换技术）隶属于语音合成
• 而WEB，也就是我们的浏览器，已经给我们封装好了TTS，能够很方便的调用API，基本上，我们能够使用原生的前端元素直接实现文本转语音，语音转文字

因此任何前端框架都可以使用该套逻辑实现TTS

WEB自带TTS

它是有自己的官方文档的，我们可以很轻易的就通过该API文档来找到我们需要的实现的逻辑

WEB自带TTS官方中文文档API

基础事件

文字转语音基础事件

这里给大家列出几个常用的基础事件，更多可访问上面的API文档

// 创建 SpeechSynthesisUtterance 对象
var speechUtterance = new SpeechSynthesisUtterance('Hello, how are you?');
// 创建 SpeechSynthesis 对象
var synthesis = window.speechSynthesis;
// 设置语音合成的事件处理函数
// 开始语音合成
speechUtterance.onstart = function(event) {
  console.log('Speech synthesis started.');
};
// 结束语音合成
speechUtterance.onend = function(event) {
  console.log('Speech synthesis ended.');
};
// 暂停语音合成
speechUtterance.onpause = function(event) {
  console.log('Speech synthesis paused.');
};
// 恢复语音合成
speechUtterance.onresume = function(event) {
  console.log('Speech synthesis resumed.');
};
// 分段语音合成
speechUtterance.onboundary = function(event) {
  console.log('Speech boundary reached at character index ' + event.charIndex + '.');
};
// 启动语音合成
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
  synthesis.speak(speechUtterance);
});

语音转文字基础事件

// 创建 SpeechRecognition 对象
var recognition = new window.SpeechRecognition();
// 设置语音识别的事件处理函数
// 开始语音识别
recognition.onstart = function(event) {
  console.log('Speech recognition started.');
};
// 结束语音识别
recognition.onend = function(event) {
  console.log('Speech recognition ended.');
};
// 识别到语音结果
recognition.onresult = function(event) {
  var transcript = event.results[0][0].transcript;
  console.log('Recognized speech: ' + transcript);
};
// 启动语音识别
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
  recognition.start();
});

VUE项目

我有将本次研究的成果放到我的git上，以下为我项目中的截图

还有一个文本跟随朗读变色的实际上是我朋友需要的研究的功能，其实界面是差不多的，结尾我会放出我项目的git链接,以供大家参考

语音转文字

在我的项目中，vue实现语音转文字的代码如下:

• 界面
  • 逻辑

    文字转语音

    • 界面
      • 逻辑

        git链接

        WEB自带TTS实现语音文字互转git

        结语

        以上为我用vue实现WEB自带TTS来实现语音文字互转的过程，如有更多内容会在本文章更新