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

2024-02-14 22:53:09

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

方式一：

摘要：语音合成：也被称为文本转换技术（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开发一个实时性时间转换指令

前言最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了.比如咱们今天要聊的这个话题:如何用Vue开发一个实时性的时间转换指令? 接下来正文从这开始~ 如上图所示(我是截取的某技术社区首页的部分页面),大家看到用红色边框勾选中的时间文字了吧.很多网站发布动态的时候,都会有一个相对本机时间转换后的相对时间.那你知道这个功能实现的背后原理是什么吗?如果有兴趣的,请备好瓜子,茶水,继续往下读.
利用vue-router实现二级菜单内容转换

二级菜单导航是一种很普遍的功能,一般网页都会有这个功能.如果是平常的做法就是改变url,跳到相应的页面:还有一种就是frame. 如果用vue的话,可以用vue-router改变<router-view>里面的组件,这样就能做到不刷新页面都能跳到相应"页面".其实url地址还是变了,但是他没有刷新页面其他位置的内容,只是改变了<router-view>里面的组件,渲染了新的组件. 在线demo:http://runjs.cn/code/9th3cgxo html
vue获取时间戳转换为日期格式代码实例

vue获取时间戳转换为日期格式. 方法一为转载黄轶老师的format方法:出处(黄轶老师github https://github.com/ustbhuangyi): // date.js export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); }
Vue.js 时间转换代码及时间戳转时间字符串

Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds()
vue.js将unix时间戳转换为自定义时间格式

本方法通过vue.js filter实现将unix时间戳转换为自定义标准时间格式  $().ready(function() {  Vue.filter('time',   function(value) { var date = new Dat
详解vue2.0 不同屏幕适配及px与rem转换问题

因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem.要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量.所以,直接使用插件没商量. 第一步:因为rem是根据更元素来计算大小,所以,捕捉到当前屏幕的大小并赋值给html,这是其一第二步:使用px2rem插件,来捕捉当前项目的所有px,直接计算相对应数值. 这样,以后写界面,就可以直接用px来构建界面,不用自己去计算啦! 1.安装插件(我是安装了淘宝镜像,所以是cnpm,若
Vue.js对象转换实例

废话不多说了,直接给大家贴代码了.具体代码如下所示: var app = new Vue({ el: "#app", data: { login: { name: "", psd: "" } }, methods: { submit: function() { //转换成自己想要的对象 var obj = JSON.stringify(this.login); console.log(obj); axios.post("/login&q
vue项目或网页上实现文字转换成语音播放功能

一.在网页上实现文字转换成语音方式一: 摘要:语音合成:也被称为文本转换技术(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的数字,数
vue项目打包后上传至GitHub并实现github-pages的预览

vue项目打包后上传至GitHub,并实现github-pages的预览 1. 打包vue 项目 vue项目: 命令行输入打包命令npm run build,生成了dist文件夹: 打包完成. 打包常见问题1--项目资源无法加载打开刚刚打包好的dist文件夹,浏览器打开index.html 发现该页面是空白的,打开控制台发现这里看到index.html文件中没有加载任何css.js文件. 解决方法--修改config文件打开项目根目录config下的index.js文件,进行如下修改: 即
教你如何用C#制作文字转换成声音程序

教你如何用C#制作文字转换成声音程序在System.Speech命名空间下,SpeechSynthesizer类可以把文字读出来,一起来玩下~~ 首先在Windows窗体项目中引入System.Speech.界面部分: 后台代码也很简单,只不过调用了SpeechSynthesizer类的一些方法: using System.Windows.Forms; using System.Speech; using System.Speech.Synthesis; namespace WindowsFo
python实现将文本转换成语音的方法

本文实例讲述了python将文本转换成语音的方法.分享给大家供大家参考.具体实现方法如下: # Text To Speech using SAPI (Windows) and Python module pyTTS by Peter Parente # download installer file pyTTS-3.0.win32-py2.4.exe # from: http://sourceforge.net/projects/uncassist # also needs: http://ww
Python将文字转成语音并读出来的实例详解

前言本篇文章主要介绍,如何利用Python来实现将文字转成语音.将文字转成语音主要有两种不同的实现方法:先将文字转成语音,然后再通过读取语音实现发音.直接调用系统内置的语音引擎实现发音,后一种方法的实现主要利用第三方库. 环境 Python版本:Anaconda 4.4.10 操作系统:win10 注意:在使用第三方库的时候,不同的操作系统和Python版本代码可能有所差别. 调用api 可以调用第三方的语音合成api生成音频文件,然后再播放音频文件即可,这里我使用的是百度语音合成api. 1
vue项目实现图片上传功能

本文实例为大家分享了vue实现图片上传功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .uploadimg{ width:100px; height:100px; border-r
Vue项目自动转换 px 为 rem的实现方法

前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配置后,在开发中可以直接使用设计图的尺寸开发,项目为我们自动编译,转换成rem. 技术栈 vue-cli:使用脚手架工具创建项目. postcss-pxtorem:转换px为rem的插件. 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的,所以通过设置根节点的字体大
vue项目中使用rem替换px的实现示例

目录工具安装插件在项目根目录下添加.postcssrc.js文件 index.html 关于移动端页面适配,rem和vw适配方案基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基准:750设计稿(一般UI设计师给的都是750的设计稿): 工具 vue-cli:使用脚手架来搭建vue前端项目 postcss:就是postcss用js插件帮你转换css样式的一个工具.比如,这里的把你的文件里面16px替换成1rem(根
vue-cli或vue项目利用HBuilder打包成移动端app操作

一.测试项目是否可以正确运行指令:npm run dev 1.首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目二.修改路径 (assetsPublicPath: './') 1. 打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下图的右下角位置) 2. 检查下assetsRoot: path.resolve(__dirname, '-/dist'), assetsSubDirectory: 'static',
SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解

前言给大家分享以下我是如何部署 SpringBoot + Vue 前后端分离的项目的,我用的 Linux 发行版是 CentOS7.5 有了一个基于 ElementUI 的电商后台管理系统,在开发一个相似的后台就会轻松很多.不过前面的系统的后端是使用 node 完成的,对于我们 Java 开发者来说,用不到.我学习的是 ElementUI 的使用,就足够了,然后后端服务就全部可以自己使用 SpringBoot 来完成最近貌似 Vue3 正式版也发布了,正好有空看可以去看一看提示:以下是本篇

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

相关推荐

随机推荐