详解在网页上通过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脚本
Dec 03 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
Javascript异步编程async实现过程详解
Apr 02 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来处理多个提交任务
2006/10/09 PHP
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
input框中的name和id的区别
2016/11/16 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
如何使用Pytorch搭建模型
2020/10/26 Python
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
优秀班干部事迹材料
2014/01/26 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
单位员工收入证明样本
2014/10/09 职场文书
教师思想工作总结2015
2015/05/13 职场文书
Python中的datetime包与time包包和模块详情
2022/02/28 Python