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();
});