前端 vue.js javascript 语音转文字 文字转语音 语音识别 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来实现语音文字互转的过程，如有更多内容会在本文章更新

参考链接

 您阅读本篇文章共花了：