详解在网页上通过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正则表达式大全(整理详细且实用)
Nov 14 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
详解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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
JS数学函数Exp使用说明
2012/08/09 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
python运行时间的几种方法
2016/06/17 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
python实现三壶谜题的示例详解
2020/11/02 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
英国探险旅游专家:Explore
2018/12/20 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
档案检查欢迎词
2014/01/13 职场文书
优秀学生获奖感言
2014/02/15 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书