详解在网页上通过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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
详谈js模块化规范
Jul 07 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
在vscode 中设置 vue模板内容的方法
Sep 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
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
php 类自动载入的方法
2015/06/03 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
python实现图片批量剪切示例
2014/03/25 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
python安装及变量名介绍详解
2020/12/12 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
优秀大学生求职自荐信范文
2014/04/19 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
田径运动会通讯稿
2014/09/13 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
欠条样本
2015/07/03 职场文书
教师培训简讯
2015/07/20 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
浅谈Vue的computed计算属性
2022/03/21 Vue.js