详解在网页上通过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实现原理介绍)
Nov 08 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
微信小程序实现时间戳格式转换
Jul 20 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 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
杏林同学录(二)
2006/10/09 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
总裁办公室主任职责
2014/01/02 职场文书
优秀老师事迹材料
2014/02/05 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript
python通过新建环境安装tfx的问题
2022/05/20 Python
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库