详解在网页上通过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向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
Vue中自定义全局组件的实现方法
Dec 08 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
js实现飞机大战小游戏
Aug 26 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
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
JS中style属性
2006/10/11 Javascript
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
Linux下编译安装MySQL-Python教程
2015/02/02 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
python如何保证输入键入数字的方法
2019/08/23 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
详解python对象之间的交互
2020/09/29 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
建筑项目策划书
2014/01/13 职场文书
护理学专业求职信
2014/06/29 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
勇敢的心观后感
2015/06/09 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
获奖感言怎么写
2015/07/31 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
nginx+lua单机上万并发的实现
2021/05/31 Servers