详解在网页上通过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 简单导航实现代码
Sep 11 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
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
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
JavaScript简介
2015/02/15 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Python文件夹与文件的操作实现代码
2014/07/13 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
pytorch的batch normalize使用详解
2020/01/15 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
英语演讲稿范文
2014/01/03 职场文书
校园之声广播稿
2014/01/31 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
初中同学会致辞
2015/08/01 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
nginx 配置指令之location使用详解
2022/05/25 Servers