详解在网页上通过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控制web打印(局部打印)方法整理
May 29 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
window.open()实现post传递参数
Mar 12 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
vue-router单页面路由
Jun 17 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
js编写简易的计算器
Jul 29 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缓冲 output_buffering的使用详解
2013/06/13 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
python3中int(整型)的使用教程
2017/03/23 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
什么是方法的重载
2013/06/24 面试题
机电一体化应届生求职信范文
2014/01/24 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python
Hive导入csv文件示例
2022/06/25 数据库
python数字图像处理之图像的批量处理
2022/06/28 Python