详解在网页上通过JS实现文本的语音朗读


Posted in Javascript onMarch 28, 2019

摘要: 语音合成:也被称为文本转换技术(TTS),它是将计算机自己产生的、或外部输入的文字信息转变为可以听得懂的、流利的口语输出的技术。

1、接口定义

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

参数说明:

  1. lan=zh:语言是中文,如果改为lan=en,则语言是英文。
  2. ie=UTF-8:文字格式。
  3. spd=2:语速,可以是1-9的数字,数字越大,语速越快。
  4. text=**:这个就是你要转换的文字。

 2、示例代码

<!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>
		<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;
			
			// 这样为什么替换不了播放内容
			/*var ssrcc = 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=10&text='+ttsText;
			document.getElementById('tts_source_id').src=ssrcc;*/
			
			// 这样就可实现播放内容的替换了
			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=9&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>
	</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>
</html>

3、参考资料

网址:http://yuyin.baidu.com/docs/tts/44

以上所述是小编给大家介绍的在网页上通过JS实现文本的语音朗读详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
老生常谈js数据类型
Aug 03 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
js实现筛选功能
Nov 24 Javascript
详解React服务端渲染从入门到精通
Mar 28 #Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 #Javascript
JavaScript刷新页面的几种方法总结
Mar 28 #Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 #Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 #Javascript
vue-cli中使用高德地图的方法示例
Mar 28 #Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 #jQuery
You might like
PHP 和 MySQL 基础教程(二)
2006/10/09 PHP
一个取得文件扩展名的函数
2006/10/09 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
PHP读取xml方法介绍
2013/01/12 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
jQuery select操作控制方法小结
2010/05/26 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[01:13]这,就是刀塔
2014/07/16 DOTA
python模拟Django框架实例
2016/05/17 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
python实现计算器功能
2019/10/31 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
开学典礼演讲稿
2014/05/23 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
中秋节主题班会
2015/08/14 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python