详解在网页上通过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 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
angular中如何绑定iframe中src的方法
Feb 01 Javascript
微信小程序位置授权处理方法
Jun 13 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中常用编辑器推荐
2007/01/02 PHP
个人站长制做网页常用的php代码
2007/03/03 PHP
php牛逼的面试题分享
2013/01/18 PHP
php给图片加文字水印
2015/07/31 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
python解析模块(ConfigParser)使用方法
2013/12/10 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
python中dict()的高级用法实现
2019/11/13 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
比较一下entity bean和session bean
2013/12/27 面试题
应用心理学个人的求职信
2013/12/08 职场文书
编辑求职信样本
2013/12/16 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书