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来实现语音文字互转的过程,如有更多内容会在本文章更新

相关推荐
群联云防护小杜3 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2416 分钟前
html复习
javascript·microsoft·html
汉得数字平台21 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹27 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows