详解在网页上通过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 相关文章推荐
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 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和MySql中计算时间差的方法
2011/04/22 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
小议Javascript中的this指针
2010/03/18 Javascript
Date对象格式化函数代码
2010/07/17 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
Python 错误和异常小结
2013/10/09 Python
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
python删除字符串中指定字符的方法
2018/08/13 Python
wxPython色环电阻计算器
2019/11/18 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
提档介绍信范文
2015/10/22 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android