文本文字 动态 合成 语音 应用 解决不想说话,可以通过只书写文字就帮你讲述
本帖最后由 琼仔TKO 于 2020-7-13 09:04 编辑Omega AI
故事要从20207-10号的晚上开始讲述,10号的晚上我看了一篇短文小说《一生之签》,在此部小说中,有一个人工智能,“Omega AI” 它起初是一款帮助开发者本身管理项目的AI,但是后来因为出色的平等管理分配,从而让全世界的人民都通过“Omega AI”来管理平分他们的财富.....
可能你从上面的语句无法理解我想表达的意思,不要紧,我马上给你讲述 我所写的“Omega AI”过程.....
开发环境
Node 12.13.0
Electron 9.1.0
vsCode1.47
软件名称+版本
第一步:搭建开发环境1.1 安装:https://code.visualstudio.com/前往VsCode 官网下载并安装好vsCode 1.2 安装:https://nodejs.org/en/前往NodeJS官网下载长期稳定版的Node,稳定版的后缀是LTS1.3 安装:electron 框架在cmd 窗口下使用全局安装 ,在工作空间使用局部安装,两个可以一起安装,不影响开发 npm install electron --save-dev (局部项目安装) npm install -g electron (全局安装)注意:详细的安装步骤,可以某度一下,就会有很多很详细的安装教程
第二步:创建工作空间
2.1 创建:在你空余空间足够大于3G的磁盘中创建一个,名称为Omega AI 的文件夹2.2 创建:在文件夹中新建 三个文件夹(System,UI,node_inde)和一个index.js2.3 打开:使用VsCode 打开 Omega AI 文件夹
第三步:编写
3.1 编写index.js
var electron=require('electron')
var app=electron.app//引用app
var BrowserWindow=electron.BrowserWindow//窗口引用
var mainWindow=null;//声明要打开的主窗口
app.on('ready',()=>{
mainWindow=new BrowserWindow({width:400,height:38,frame:false,resizable: false})
mainWindow.loadFile('UI/run_main/index.html')//加载主html页面
mainWindow.on('closed',()=>{
mainWindow=null;
})
})
3.2 编写 主界面 UI 文件
3.2.1 因为界面是html格式的,所以你需要先创建一个标准html5文件格式的html
3.2.2 标准html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
3.2.3 编写详细UI 引入boostarp 4
css文件
<link rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
js文件
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="../JS/jquery-3.3.1.min.js"></script>
3.2.4 编写详细UI 代码编写
<body style="background-color: #c5dce4;overflow:-Scroll;overflow-y:hidden;">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text ngpms" id="basic-addon1"><img style="width: 20px;height: auto;" src="../IM/airbnb.png"></span>
</div>
<input type="text" class="form-control" placeholder="omegaAI" aria-label="Username" id="Put"
aria-describedby="basic-addon1">
</div>
<div id="space">
</div>
</body>
到此为止,界面算是搭建出了 接下来就进入文本文字动态合成语音编写
3.3 文本文字动态合成语音编写
3.3.1在System文件夹下新建一个处理语音的文件夹voice并再创建一个voice.js文件
3.3.2文本文字动态合成,这个如果自己全全处理,是非常麻烦的,所以我们使用阿里云的语音合成公测接口,
3.3.3 voice.js 代码如下
function openVoice(data){
var VoiceInterface=' <audio autoplay="autoplay">\n' +
'\t\t\t<source \n' +
'\t\t\t\tsrc="https://nls-gateway.cn-shanghai.aliyuncs.com/stream/v1/tts?appkey=0AJEtyC66dKQiY9a&token=9b34a9d538934919bc3bfdea14f66347&format=mp3&voice=Aiya&speech_rate=-150&volume=70&text=\n' +
' '+data+',\n' +
' "\n' +
'\t\t\t\ttype="audio/mp3" />\n' +
'\t\t</audio>';
$("#space").html(VoiceInterface);
}
//读取JSON
function openJSON(JSON){
$.getJSON(JSON, function (data){
});
}
这包含两个事件处理函数,一个是词典读取加载函数,一个是语音合成接口处理函数,
介绍 语音合成接口处理函数
本质:通过访问接口传递文本文字数据获得语音播放url,在将url编写到一个预处理的audio标签中,并将标签通过Jquery切入到事先div中
分析代码:
定义一个变量VoiceInterface
对变量进行预处理
使用$().html进行切入操作 3.4 nodeJS初始化工作空间
3.4.1 在vs Code 工具中 选择“终端--新建终端” 3.4.2 输入 npm init --yes初始化当前开发空间 3.5 初步运行项目
在终端中输入electron . 即刻运行 3.5.1 效果图
3.6 打包项目
3.6.1 安装electron打包工具electron-packager npm install electron-packager -g3.6.2 配置打包命令在初始化项目空间时所生成的package.json中 "scripts": { "start": "electron .", "pack": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0" } 命令结构如下(根据实际情况修改):“.”:需要打包的应用目录(即当前目录),“myClient”:应用名称,“--win”:打包平台(以Windows为例),“--out ../myClient”:输出目录,“--arch=64”:64位,“--app-version=0.0.1”:应用版本,“--electron-version=2.0.0”:electron版本执行打包命令:
npm run pack
打包完成后,找到输出目录,打开打包完成后的文件夹,可以看到生成了.exe的执行文件以及其他的一堆配置文件,双击myClient.exe就可以打开应用程序了。现在,我们已经得到了应用程序的绿色版本(无需安装,拷贝整个文件目录之后即可使用)
初期版本的开发流程就到此结束完整的开发空间图: 下载:https://qtm.lanzouj.com/b00nkhh7a密码:8cdo function openVoice(data){
var VoiceInterface=' <audio autoplay="autoplay">\n' +
'\t\t\t<source \n' +
'\t\t\t\tsrc="https://nls-gateway.cn-shanghai.aliyuncs.com/stream/v1/tts?appkey=0AJEtyC66dKQiY9a&token=9b34a9d538934919bc3bfdea14f66347&format=mp3&voice=Aiya&speech_rate=-200&volume=70&text=\n' +
' '+data+',\n' +
' "\n' +
'\t\t\t\ttype="audio/mp3" />\n' +
'\t\t</audio>';
$("#space").html(VoiceInterface);
}
//读取JSON
function openJSON(JSON){
$.getJSON(JSON, function (data){
});
}
voice.js里面是这些东西,请问替换哪个啊:'(weeqw,小白完全不会求详细使用教程 liqx 发表于 2020-7-13 09:20
老大,我脑子有点晕,哈哈。我只想用成品。
下载链接中包含了成品,你需要替换一下voice.js中语言处理函数中的接口中的参数 Omega AI,沙发先占。 没懂{:1_918:}{:1_918:},来发教程? 就是看着有点复杂呀。。。 看似不错,照葫芦画瓢试一下。先谢谢楼主分享啦 看着有点复杂{:1_907:}
看起来太复杂了。。
就没有简单一点的吗? 老大,我脑子有点晕,哈哈。我只想用成品。 可以订制羞羞的萌妹的声音吗{:1_886:} nullable 发表于 2020-7-13 09:22
可以订制羞羞的萌妹的声音吗
哈哈哈,这个理论上是可以的,不过工作量实在是太大了