详解在网页上通过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 相关文章推荐
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 Javascript
浅谈JavaScript作用域
Dec 06 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调用三种数据库的方法(3)
2006/10/09 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
判断浏览器的javascript版本的代码
2010/09/03 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
js验证密码强度解析
2020/03/18 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
Python笔试面试题小结
2019/09/07 Python
爱游人:Travelliker
2017/09/05 全球购物
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
运动会广播稿150字
2014/02/19 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
股权转让协议书
2014/04/12 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
园林技术专业求职信
2014/07/28 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
护士2015年终工作总结
2015/04/29 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
初中政治教学反思
2016/02/23 职场文书
入党申请书格式
2019/06/20 职场文书