详解在网页上通过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.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
package.json文件配置详解
Jun 15 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
Vue动态组件实例解析
Aug 20 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 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
Yii2框架实现注册和登录教程
2016/09/30 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
Python多进程写入同一文件的方法
2019/01/14 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
Python程序慢的重要原因
2020/09/04 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
电大毕业生自我鉴定
2013/11/10 职场文书
大学生求职计划书
2014/04/30 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书