vue 文字转语音mp3_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的数字,数字越大,语速越快。
text=**:这个就是你要转换的文字。
3、代码示例:
语音测试
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 = '';
var sss = '';
var eee = '';
var au2 = '';
ttsDiv.innerHTML = au1 + sss + eee + au2;
ttsAudio = document.getElementById('tts_autio_id');
ttsAudio.play();
}
方式二:
1、调动方法:参数为指定文字
2、这里主要用的是SpeechSynthesisUtterance的方法
3、代码示例:
在这里插入代码片
点击
// 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').οnclick=throttle(handleSpeak,1000);
二、在vue项目中实现文字转换为语音播放
1、调用方法:参数为指定的文字
2、主要使用的也是是SpeechSynthesisUtterance的方法(其他方法也可以,如使用百度的接口)
3、代码示例:
在这里插入代码片
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 文字转语音mp3_vue项目或网站上实现文字转换成语音播放功能相关推荐
- 每日分享:可以将文字转换成语音的软件有哪些?
奶奶没事时就喜欢自己上网关注一下时讯,了解近期社会上发生的各种事情.不过,随着她年纪的增长,一直对着电子产品她的眼睛会受不了.但让她不用电子产品她又不愿意,我们只能每天在下班后或休息时念给她听.不过这 ...
- 在vue项目或网页上实现文字转换成语音
** 在vue项目或网页上简单实现文字转换成语音播放 ** 一.在网页上实现文字转换成语音 方式一: 摘要:语音合成:也被称为文本转换技术(TTS),它是将计算机自己产生的.或外部输入的文字信息转变为 ...
- html 语音转换成文本,vue项目或网页上实现文字转换成语音播放功能
一.在网页上实现文字转换成语音 方式一: 摘要:语音合成:也被称为文本转换技术(TTS),它是将计算机自己产生的.或外部输入的文字信息转变为可以听得懂的.流利的口语输出的技术. 1. 使用百度的接口: ...
- 怎么将文字转换成语音?
将文字转换成语音的形式有很多种,有的时候我们可以将准备好的文字文件转换成语音的形式,下面小编就给大家简单介绍一下. 步骤一:将文字转换成语音的形式并不是很困难,我们首先需要将文字准备好,然后通过在浏览 ...
- java自制语音识别,老司机搞定java使用语音识别将文字转换成语音
电脑现已成为我们工作.生活和娱乐必不可少的工具了,在使用电脑的过程中,可能会遇到java使用语音识别将文字转换成语音的问题,如果我们遇到了java使用语音识别将文字转换成语音的情况,该怎么处理怎么才能 ...
- 怎么把文字转换成语音?教你几个方法,超级简单
怎么把文字转换成语音呢?有些朋友在工作中有时候可能需要把一段文字制作成语音来使用,这时候可能有人就会犯难了,该怎么做才能把文字转换成语音呢?其实方法很简单,只需要借助第三方软件即可快速实现转换,下面就 ...
- 怎么把文字在线转换成语音?
怎么把文字在线转换成语音?现在很多时候我们都可以将一些准备好的文件中的文字转换成语音的形式,那么下面就让小编简单给大家介绍一下方法. 步骤一:文字转换成语音的方式是可以进行在线转换的,首先我们需要通过 ...
- 怎么把手机计算机开启语音,怎么把文字转换成语音?电脑端和手机端的转换攻略都在这了...
我们在日常的工作中,总是需要看文件啊,看报表啊之类的内容,有时候会觉得眼睛很不舒服不想要看文字内容了.但是工作又不能够往后推怎么办?我们可以试试将文字转成语言,直接用听的就行了. 一.手机端: 1.使 ...
- 怎么把手机计算机开启语音,怎么把文字转换成语音,电脑端和手机端的方法,都在这里了...
原标题:怎么把文字转换成语音,电脑端和手机端的方法,都在这里了 平时在生活中,是不是有时候会没空可以看文件,看新闻,又或者眼睛有点酸,不想看手机电脑?又或者是需要配音,怕自己的声音不好听不好意思配?这 ...
- Vue:echarts的柱状图为什么X轴上的文字不显示?
Vue:echarts的柱状图为什么X轴上的文字不显示? 资源: echarts x轴文字显示不全(解决方案) echarts柱状图X轴底部文字有的不显示出来?
最新文章
- 巧用Excel 2010数据透视表制作销售报表
- python画图中文显示_解决Linux系统中python matplotlib画图的中文显示问题
- Java实现插入排序及其优化 insertion sort
- java通过url抓取网页数据-----正则表达式
- L2-006 树的遍历
- 在JDK 11中启动单文件源代码程序
- java判断是否是路径_java判断是否是目录
- fl2440hello world模块驱动编写
- 浅谈客服中心员工情绪管理这件事
- 工信部强化车联网安全监管、上云可有效阻止勒索攻击|全球网络安全热点
- 福昕阅读器注册无法连接服务器,福昕pdf阅读器 10安装使用教程(附注册机)
- 搜狗站长平台没有sitemap的接口无法提交sitemap?该怎么提交?【已解决】
- 怎么改变图片的dpi的大小?如何修改照片dpi值?
- java if或_java中if条件语句里条件的并列
- 【C语言】C语言笔记
- HTML-内嵌框架-00
- RecyclerView使用探索1--了解及使用
- 最新陈冉冉破译珠心算密码,领略数字之美全套课值得学习吗
- 使用Kindle4rss推送自己感兴趣的博文
- 推荐6款地球表面最强软件的电脑软件
热门文章
- 常用DB9外设接口定义
- W5500EVB从网络上获取标准时间
- 银行核心系统软件开发
- 飘云阁(PYG)番茄插件流氓弹窗清除方法
- JAVA计算机毕业设计在线购书商城系统Mybatis+源码+数据库+lw文档+系统+调试部署
- appium和airtest_Airtest自动化测试工具
- 怎么把照片做成计算机主题,windows10主题制作怎么操作_windows10电脑主题如何自己制作...
- 腾讯云播放器 Demo与调用方法
- Kali欺骗网关攻击Windows10截取数据
- HBase权威指南【中文版】