vue项目或网页上实现文字转换成语音播放功能


Posted in Javascript onJune 09, 2020

一、在网页上实现文字转换成语音

方式一:

摘要:语音合成:也被称为文本转换技术(TTS),它是将计算机自己产生的、或外部输入的文字信息转变为可以听得懂的、流利的口语输出的技术。
1、 使用百度的接口:

http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=你要转换的文字

2、参数说明:

lan=zh:语言是中文,如果改为lan=en,则语言是英文。

ie=UTF-8:文字格式。

spd=2:语速,可以是1-9的数字,数字越大,语速越快。

text=**:这个就是你要转换的文字。
3、代码示例:

<!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>
	</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>
	<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;

			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=4&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>
</html>

方式二:
1、调动方法:参数为指定文字
2、这里主要用的是SpeechSynthesisUtterance的方法
3、代码示例:

在这里插入代码片
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<button id="abc">点击</button>
</body>
</html>
<script type="text/javascript">
	// window.οnlοad=function(){
	// 	const synth = window.speechSynthesis
		// let msg = new SpeechSynthesisUtterance("你好");
	// console.log(msg)
	// //msg.rate = 4 播放语速
	// //msg.pitch = 10 音调高低
	// //msg.text = "播放文本"
	// //msg.volume = 0.5 播放音量
	// synth.speak(msg);
	// }
	const synth = window.speechSynthesis
	const msg = new SpeechSynthesisUtterance()
	msg.text = 'hello world'
	msg.lang = 'zh-CN'
	function handleSpeak(e) {
		synth.speak(msg)
	}
	function throttle(fn,delay) {
		let last = 0
		return function() {
	 		const now = new Date()
	 		if(now - last > delay) {
	 		fn.apply(this,arguments)
	 		last = now
	 		}
		}
	}
 
 console.log(msg);
 
	document.getElementById('abc').onclick=throttle(handleSpeak,1000);
</script>

二、在vue项目中实现文字转换为语音播放

1、调用方法:参数为指定的文字
2、主要使用的也是是SpeechSynthesisUtterance的方法(其他方法也可以,如使用百度的接口)
3、代码示例:

在这里插入代码片
 <img
 v-on:click="read(word.word)"
 src="../../assets/laba.png"
 alt="小喇叭"
 width="20px"
 height="20px"
 style="float: right;margin-top: 7px"
 />
在这里插入代码片
 methods: {
 read: function(word) {
 const synth = window.speechSynthesis;
 const msg = new SpeechSynthesisUtterance();
 msg.text = word;
 msg.lang = "zh-CN";
 function handleSpeak(e) {
 synth.speak(msg);
 }
 function throttle(fn, delay) {
 let last = 0;
 return function() {
 const now = new Date();
 if (now - last > delay) {
 fn.apply(this, arguments);
 last = now;
 }
 };
 }
 console.log(msg);

 throttle(handleSpeak(), 1000);
 },
 }

点击小喇叭即可播放

vue项目或网页上实现文字转换成语音播放功能

总结

到此这篇关于在vue项目或网页上实现文字转换成语音的文章就介绍到这了,更多相关在vue项目或网页上实现文字转换成语音内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript基础的动画教程,直观易懂
Jan 10 Javascript
javascript 贪吃蛇实现代码
Nov 22 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
浅谈vue的第一个commit分析
Jun 08 #Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 #Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 #Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 #Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 #Javascript
基于javascript处理二进制图片流过程详解
Jun 08 #Javascript
vue-router的hooks用法详解
Jun 08 #Javascript
You might like
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
用cssText批量修改样式
2009/08/29 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
Django实现组合搜索的方法示例
2018/01/23 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
QML实现钟表效果
2020/06/02 Python
python try...finally...的实现方法
2020/11/25 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
红色旅游心得体会
2014/09/03 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
音乐会主持人开场白
2015/05/28 职场文书
观后感格式
2015/06/19 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
学习委员竞选稿
2015/11/20 职场文书