vue项目或网页上实现文字转换成语音播放功能


Posted in Javascript onJune 09, 2020

一、在网页上实现文字转换成语音

方式一:

摘要:语音合成:也被称为文本转换技术(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.speechSynthesis
	const msg = new SpeechSynthesisUtterance()
	msg.text = 'hello world'
	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);
 
	document.getElementById('abc').onclick=throttle(handleSpeak,1000);
</script>

二、在vue项目中实现文字转换为语音播放

1、调用方法:参数为指定的文字
2、主要使用的也是是SpeechSynthesisUtterance的方法(其他方法也可以,如使用百度的接口)
3、代码示例:

在这里插入代码片
 <img
 v-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项目或网页上实现文字转换成语音播放功能

总结

到此这篇关于在vue项目或网页上实现文字转换成语音的文章就介绍到这了,更多相关在vue项目或网页上实现文字转换成语音内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 Javascript
浅谈vue的第一个commit分析
Jun 08 #Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 #Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 #Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 #Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 #Javascript
基于javascript处理二进制图片流过程详解
Jun 08 #Javascript
vue-router的hooks用法详解
Jun 08 #Javascript
You might like
smarty基础之拼接字符串的详解
2013/06/18 PHP
php数组合并的二种方法
2014/03/21 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
JQuery球队选择实例
2015/05/18 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
python登陆asp网站页面的实现代码
2015/01/14 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
python获取txt文件词向量过程详解
2019/07/05 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
python操作链表的示例代码
2020/09/27 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
UNIX特点都有哪些
2016/04/05 面试题
便利店投资的创业计划书
2014/01/12 职场文书
学党史心得体会
2014/09/05 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers