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 页面编码与浏览器类型判断代码
Jun 03 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 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
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
使用Modello编写JavaScript类
2006/12/22 Javascript
jQuery 表格工具集
2010/04/25 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
浅谈javascript的调试
2015/01/28 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
应届毕业生就业自荐信
2013/10/26 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
安全宣传标语口号
2014/06/06 职场文书
质量标语大全
2014/06/12 职场文书
运动会加油稿100字
2014/09/19 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
windows安装python超详细图文教程
2021/05/21 Python