详解在网页上通过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 相关文章推荐
javaScript Array(数组)相关方法简述
Jul 25 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
vue兄弟组件传递数据的实例
Sep 06 Javascript
react 父子组件之间通讯props
Sep 08 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
用Flash图形化数据(二)
2006/10/09 PHP
PHP静态类
2006/11/25 PHP
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
javascript css float属性的特殊写法
2008/11/13 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
numpy中索引和切片详解
2017/12/15 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
Django中的用户身份验证示例详解
2019/08/07 Python
python list多级排序知识点总结
2019/10/23 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
django自定义模板标签过程解析
2019/12/14 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
客户答谢会致辞
2015/01/20 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
redis数据一致性的实现示例
2022/03/18 Redis