成都网站建设设计

将想法与焦点和您一起共享

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

这篇文章主要为大家展示了如何在vue项目或网页上实现文字转换成语音播放功能,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。

成都创新互联公司,为您提供重庆网站建设公司成都网站制作公司、网站营销推广、网站开发设计,对服务成都葡萄架等多个行业拥有丰富的网站建设及推广经验。成都创新互联公司网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈,认真对待每位客户,为客户提供赏心悦目的作品。 与客户共同发展进步,是我们永远的责任!

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

方式一:

摘要:语音合成:也被称为文本转换技术(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、代码示例:



	
		
		语音测试
	
	
		

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

在这里插入代码片



	


	


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

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

在这里插入代码片
 小喇叭
在这里插入代码片
 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项目或网页上实现文字转换成语音播放功能
URL标题:http://chengdu.cdxwcx.cn/article/ipjoic.html