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

前言

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


o·( )o·(雾)


然后最近,我朋友突然和我说有没有做过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来实现语音文字互转的过程,如有更多内容会在本文章更新

相关推荐
山河木马7 分钟前
前端学C++可太简单了:双冒号 :: 操作符
前端·javascript·c++
3Katrina8 分钟前
前端面试之防抖节流(二)
前端·javascript·面试
前端进阶者14 分钟前
天地图编辑支持删除编辑点
前端·javascript
江号软件分享23 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享23 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海27 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子38 分钟前
深入理解TCP协议
前端·javascript·面试
万少39 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
顽疲1 小时前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好1 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl