在vue项目或网页上实现文字转换成语音

在vue项目或网页上简单实现文字转换成语音播放

一、在网页上实现文字转换成语音
方式一：
摘要：语音合成：也被称为文本转换技术（TTS），它是将计算机自己产生的、或外部输入的文字信息转变为可以听得懂的、流利的口语输出的技术。
1、使用百度的接口：

http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=你要转换的文字

2、参数说明：

lan=zh：语言是中文，如果改为lan=en，则语言是英文。

ie=UTF-8：文字格式。

spd=2：语速，可以是1-9的数字，数字越大，语速越快。

text=**：这个就是你要转换的文字。
3、代码示例：


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>语音测试</title></head><body><div><input type="text" id="ttsText"><input type="button" id="tts_btn" onclick="doTTS()" value="播放"></div><div id="bdtts_div_id"><audio id="tts_autio_id" autoplay="autoplay"><source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=9&text=播报内容" type="audio/mpeg"><embed id="tts_embed_id" height="0" width="0" src=""></audio></div></body><script type="text/javascript"> function doTTS(){var ttsDiv = document.getElementById('bdtts_div_id');var ttsAudio = document.getElementById('tts_autio_id');var ttsText = document.getElementById('ttsText').value;ttsDiv.removeChild(ttsAudio);var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=Zh&ie=UTF-8&spd=4&text='+ttsText+'" type="audio/mpeg">';var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';var au2 = '</audio>';ttsDiv.innerHTML = au1 + sss + eee + au2;ttsAudio = document.getElementById('tts_autio_id');ttsAudio.play();}</script>
</html>

方式二：
1、调动方法：参数为指定文字
2、这里主要用的是SpeechSynthesisUtterance的方法
3、代码示例：

在这里插入代码片
<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body><button id="abc">点击</button>
</body>
</html>
<script type="text/javascript">// window.οnlοad=function(){//    const synth = window.speechSynthesis// let msg = new SpeechSynthesisUtterance("你好");//       console.log(msg)//      //msg.rate = 4 播放语速//      //msg.pitch = 10 音调高低//      //msg.text = "播放文本"//      //msg.volume = 0.5 播放音量//       synth.speak(msg);// }const synth = window.speechSynthesisconst msg = new SpeechSynthesisUtterance()msg.text = 'hello world'msg.lang = 'zh-CN'function handleSpeak(e) {synth.speak(msg)}function throttle(fn,delay) {let last = 0return function() {const now = new Date()if(now - last > delay) {fn.apply(this,arguments)last = now}}}console.log(msg);document.getElementById('abc').onclick=throttle(handleSpeak,1000);
</script>

二、在vue项目中实现文字转换为语音播放
1、调用方法：参数为指定的文字
2、主要使用的也是是SpeechSynthesisUtterance的方法（其他方法也可以，如使用百度的接口）
3、代码示例：

在这里插入代码片<imgv-on:click="read(word.word)"src="../../assets/laba.png"alt="小喇叭"width="20px"height="20px"style="float: right;margin-top: 7px"/>

在这里插入代码片methods: {read: function(word) {const synth = window.speechSynthesis;const msg = new SpeechSynthesisUtterance();msg.text = word;msg.lang = "zh-CN";function handleSpeak(e) {synth.speak(msg);}function throttle(fn, delay) {let last = 0;return function() {const now = new Date();if (now - last > delay) {fn.apply(this, arguments);last = now;}};}console.log(msg);throttle(handleSpeak(), 1000);},}

点击小喇叭即可播放

在vue项目或网页上实现文字转换成语音相关推荐

html 语音转换成文本,vue项目或网页上实现文字转换成语音播放功能
一.在网页上实现文字转换成语音方式一: 摘要:语音合成:也被称为文本转换技术(TTS),它是将计算机自己产生的.或外部输入的文字信息转变为可以听得懂的.流利的口语输出的技术. 1. 使用百度的接口: ...
怎么把文字转换成语音？文字转语音操作技巧分享
不知道各位伙伴平时在空闲时间喜不喜欢看书呢?记得小时候我经常喜欢在空闲时间拿着一本书出来看,现在随着工作的忙碌,看书这个习惯还是没有改掉,有时候就想着能不能将书上的文字转换成语音呢?这样就不用去一个字 ...
如何把图片上的文字转换成word？
有的图片上是有文字的,我们可以将图片上的文字转换成Word文档,那么我们是怎么进行在线转换的?下面小编简单给大家介绍一下. 步骤一:我们可以将这些带有文字的图片放在桌面上,将这些需要转换的图片进行保存 ...
图片上的文字转换成word-捷速OCR文字识别
图片上的文字转换成word-捷速OCR文字识别这几天公司需要我将一片旅游书籍上的几篇关于旅游的文章进行编辑,做一个相关方面的专题,这可就烦到我了,专题方面的设计对我来说并不难,难的就是我必须把那几篇 ...
如何把图片上面的文字转换成word-OCR文字识别软件
解析如何把图片上面的文字转换成word 有没有小伙伴们为百度文库里面的资源下载需要下载券感到坑爹,特别是现下下载资源紧缺,各个网站配合网打的行动,导致很多优秀网站现在没法下载资源,尤其是新浪爱问共享资 ...
如何把图片上的文字转换成文字?第二个功能更强大！
如何把图片上的文字转换成文字?说到把图片上的文字转换成文字,相信大家对于这一需求都不陌生.这一需求经常发生在我们阅读文章遇到好的选段想要摘录,或者是上级领导突然发了图片过来,让我们将里面的文字内容提取 ...
java自制语音识别,老司机搞定java使用语音识别将文字转换成语音
电脑现已成为我们工作.生活和娱乐必不可少的工具了,在使用电脑的过程中,可能会遇到java使用语音识别将文字转换成语音的问题,如果我们遇到了java使用语音识别将文字转换成语音的情况,该怎么处理怎么才能 ...
怎么让文字转换成语音？一步一步让你学会
在日常的生活中,我们经常会需要将文字转换成语音的情况,例如广告词.给文本配音等等,当然我们就简单的方法就是自己手动进行配音,但是如果没有专业的设备和配音环境,是很难配出很好的效果的,这该怎么办呢?其实 ...
怎么将文字转换成语音？
将文字转换成语音的形式有很多种,有的时候我们可以将准备好的文字文件转换成语音的形式,下面小编就给大家简单介绍一下. 步骤一:将文字转换成语音的形式并不是很困难,我们首先需要将文字准备好,然后通过在浏览 ...

在vue项目或网页上实现文字转换成语音

在vue项目或网页上简单实现文字转换成语音播放

在vue项目或网页上实现文字转换成语音相关推荐

最新文章

热门文章