微信小程序使用UNIT模拟【智能音箱】的功能
mxw2552261 发布于2018-05-20 22:54 浏览:16349 回复:99
7
收藏
最后编辑于2018-11-12

现在市场上智能音箱琳琅满目,一句话就能听歌,读诗,他们是怎么做到的呢?我们这一篇来讲讲如何利用微信小程序和Unit来模拟智能音箱的功能。

我本身是做java服务端的,做了一个智能语音服务,但是服务没有客户端展现的话,是没有意义的,用Android和IOS做客户端的话,成本还是挺高的,所以我选择了小程序,只要有微信,就能使用,而且它的语法和HTML都很差不多,所以,这是一个人开发技术选型最好的选择。

这个智能语音微信小程序跟UNIT进行对接,实现语音听歌,听新闻,听小说,听评书,听相声,诗词歌赋,语音查询天气,尾号限行等等等等,只要说出你想听的,基本都涵盖了。

 

扫码即可打开小程序进行试用

 

 

 

 

现在把我写小程序的过程写出来,给大家进行分享:

1. 首先创建自己的小程序:

微信小程序属于公众号的一部分,打开地址:https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN  选择注册小程序

 

 

通过邮箱注册

 

 

 点击注册,这时候会发送一封激活邮件到邮箱里,打开邮箱里的邮件,点击链接进行激活。

 

 

根据你的实际情况进行注册,如果是个人就选择个人,如果自己有公司就选择公司。公司账号的话,权限比较多,而且审核速度比个人的要快。

我们以“个人”为例,选择个人后,下方需要填写管理员信息,包括身份证等等,微信公众号是需要微信账户进行管理的,所以需要用你的微信进行扫描验证(此微信就是后续的管理员)。

 

 

填写完相关信息后,点击继续注册成功

 

 

第一步,点击填写,填写小程序的相关信息

 

 

在开发着设置里找到AppID,其他每个选项大家可以自己看下,不在细说。

 

 

小程序的配置已基本完成,下一步需要下载开发工具了,微信自己开发的IDE,下载地址是:
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html


根据自己的系统环境下载符合自己的版本

 

 

 

安装完成后,打开IDE

 

 

选择项目目录,填入申请小程序时候生成的AppID,并且给自己的项目起一个名词,勾选 "创建 QuickStart 项目"。
如果没有登录的话,会提示进行登录,直接用小程序的管理员或者添加的开发者扫码即可登录。

 


这样就生成了一个获取用户头像的小程序,我们可以在此基础上来添加自己的页面功能。

  

 

小程序提供的API非常丰富,只要对HTML等技术了解的话,开发小程序非常esay。
https://developers.weixin.qq.com/miniprogram/dev/api/


而且,他还提供了组件和API的Demo,用到的话,直接copy到你的程序里,改改就可以用了。
https://developers.weixin.qq.com/miniprogram/dev/demo.html

 

 

点击下载即可

 

 

OK,项目已经创建好了,我们下面可以来看看核心的代码。


// 获取全局唯一的录音管理器 recorderManager,下图是微信提供的录音API,有这个我们就可以完成录音功能。
const recorderManager = wx.getRecorderManager();

 

 

// 录音时需要的参数,参数说明见下图
const voiceOptions = {
     duration: 10000,
     sampleRate: 16000,
     numberOfChannels: 1,
     encodeBitRate: 96000,
     format: 'mp3',
     frameSize: 50
}

 

 

// 添加按钮点击事件,启动录音
openVoice: function (e) {


     // 开始录音
     recorderManager.start(voiceOptions);


     this.setData({
          image: '/images/voiceing.png'
     });
},


// 添加按钮离开事件,停止录音
closeVoice: function (e) {

     // 停止录音,停止录音时,会触发onStop事件
     recorderManager.stop(voiceOptions)


     this.setData({
          image: '/images/voice.png'
     });
},


// 添加录音停止触发事件,这段代码可以放到onLoad()里,页面加载的时候就添加上
recorderManager.onStop((res) => {

     const { tempFilePath } = res
     this.uploadVoice(tempFilePath);
});


// 定义上传声音文件到服务器,调用百度语音识别接口把声音转成文字
uploadVoice: function (tempFilePath) {
     var _this = this;


     //创建Header,跟服务端进行鉴权,约定一个算法,这样防止有人恶意刷接口。
     var header = this.createHeader();


     var str = "noncestr=" + header.noncestr + "&platform=" + header.platform + "&timestamp=" + header.timestamp + "&uid=" + header.uid + "&appkey=" + app.appkey;


     var sign = md5.hex_md5(str);
     header['sign'] = sign;


     wx.uploadFile({
          url: 'https://test.weixin.com/api/v2/audio',
          filePath: tempFilePath,
          name: 'file',
          header: header,

          success: function (res) {


               var data = JSON.parse(res.data);
               var resultData = data.data;


               // 根据自己的业务逻辑进行处理
               ......


               // 语音识别出文字后,然后调用UNIT进行语义解析
               _this.voiceAnalysis(resultData.content);
          },
          fail: function (res) {
               // console.info(res);
               _this.addText({
                    role: 'robot',
                    flex_direction: 'row',
                    message: '网络异常,请稍后再试!'
              });
          }
})
},


voiceAnalysis: function (content) {


     var header = this.createHeader();


     var str = "content=" + content + "&noncestr=" + header.noncestr + "&platform=" + header.platform + "&timestamp=" + header.timestamp + "&uid=" + header.uid + "&appkey=" + app.appkey;


     var sign = md5.hex_md5(str);


     header['content-type'] = 'application/x-www-form-urlencoded'
     header['sign'] = sign;


     var _this = this;
     wx.request({
          url: 'https://test.weixin.com/api/v2/dialog',
          data: {
               content: content,
               sessionId: this.sessionId ? this.sessionId : ''
          },
          header: header,
          method: 'POST',
          success: function (res) {
               // 语义解析成功后,可以进行自己的业务逻辑了


               var resultData = res.data.data;
               _this.sessionId = resultData.sessionId;


               // 打开音频播放页面
               wx.navigateTo({
                    url: '/pages/audio/audio'
               })
          },
          fail: function (res) {
               // console.info(res);
               _this.addText({
                    role: 'robot',
                    flex_direction: 'row',
                    message: '网络异常,请稍后再试!'
               });
          }
     })
},


createHeader: function () {
     return {
          'timestamp': Date.now(),
          'noncestr': util.guid(),
          'uid': app.userId,
          'platform': app.platform
     }
},


篇幅有限,只贴了核心代码,大概的业务逻辑就是这样,简单画个图

 

 

现在开始配置UNIT:

 

添加歌手词槽

 

 

选择系统词槽

 

 

创建完成后:

 

加一些样本进行训练,然后测试,样本越多,训练的效果越好

 

 

然后写自己的服务端调用UNIT的接口实现对话的逻辑,给小程序提供接口服务。这个地方可以用Java,PHP,Python,NodeJs等等语言实现。

 

语音识别:语音转文字,以及文字合成语音,我用的也是百度语音,https://ai.baidu.com/docs#/ASR-API/top ,直接下载SDK进行调用接口,非常简单。

 

百度语音和百度UNIT已经帮我们做了一半的事情,那另一半的事情就是根据意图查询相应数据源了,比如音乐,相声,小品,比如天气,限行等信息,跟第三方对接即可。

其实整个下来也挺简单的。


我会把源码发布到我的付费的知识星球里,写代码不易,希望大家支持,还有一些无法公开发布的内容,请谅解。

 

想要加入unit群讨论,加参见 http://ai.baidu.com/forum/topic/show/497175     查看加入方法 

收藏
点赞
7
个赞
共99条回复 最后由mxw2552261回复于2018-11-12 14:45
#100mxw2552261回复于2018-11-12 14:45:22
#99 189******80回复
小程序很普遍,但还是觉得不是很方便

你说的不方便指什么不方便?入口不方便?使用不方便?

0
#99189******80回复于2018-11-11 14:02:23

小程序很普遍,但还是觉得不是很方便

0
#98mxw2552261回复于2018-11-04 23:03:20
#97 蓝兰兰111回复
你是申请的个人吗?

公司的

0
#97蓝兰兰111回复于2018-11-03 10:47:23
#96 mxw2552261回复
我已经申请了,官网显示已经开放咯

你是申请的个人吗?

0
#96mxw2552261回复于2018-11-03 09:10:12
#94 蓝兰兰111回复
目前都是针对机构,企业开放,个人的还不支持

我已经申请了,官网显示已经开放咯

0
#95蓝兰兰111回复于2018-11-02 19:07:31
#92 jyblbq1314回复
话说我还不知道百度小程序怎么用。

你是说使用还是开发,使用就直接在百度app上,下拉就能看到,开发的话,用百度小程序的开发平台。

0
#94蓝兰兰111回复于2018-11-02 19:06:34
#91 mxw2552261回复
12月份要开发了?

目前都是针对机构,企业开放,个人的还不支持

0
#93mxw2552261回复于2018-11-02 13:08:52
#92 jyblbq1314回复
话说我还不知道百度小程序怎么用。

语法跟微信小程序差不多,现在好像已经对外开放了,但是只针对企业。

https://smartprogram.baidu.com/mappconsole/main/login

0
#92jyblbq1314回复于2018-11-01 21:41:16
#88 蓝兰兰111回复
百度小程序也上了不少了,可以在百度app上看到,12月份开放了,估计会涌现很多
展开

话说我还不知道百度小程序怎么用。

0
#91mxw2552261回复于2018-10-30 17:05:48
#88 蓝兰兰111回复
百度小程序也上了不少了,可以在百度app上看到,12月份开放了,估计会涌现很多
展开

12月份要开发了?

0
#90mxw2552261回复于2018-10-30 17:04:45
#87 求代课1357回复
微信有好多好用的小程序啦

是的啊

0
#89Bzjgis回复于2018-10-30 16:53:17
#82 jyblbq1314回复
百度是有用java的,但是java岗相对少了很多。

百度server用PHP的多一些

0
#88蓝兰兰111回复于2018-10-30 15:18:40
#87 求代课1357回复
微信有好多好用的小程序啦

百度小程序也上了不少了,可以在百度app上看到,12月份开放了,估计会涌现很多

0
#87求代课1357回复于2018-10-29 22:06:01

微信有好多好用的小程序啦

0
#86jyblbq1314回复于2018-10-26 13:03:46
#84 mxw2552261回复
你是百度的?

不是百度的,我同学在百度,知道的多些。

0
#85jyblbq1314回复于2018-10-26 13:03:01
#83 mxw2552261回复
如何商用呢?

小程序商用不稳定吧。不过现在的吃饭啊,买东西啊,都关注小程序,支付,下单。应该是你想说的?

0
#84mxw2552261回复于2018-10-26 09:05:40
#82 jyblbq1314回复
百度是有用java的,但是java岗相对少了很多。

你是百度的?

0
#83mxw2552261回复于2018-10-26 09:05:08
#79 liguanghui2588回复
这个小程序商用可以吗

如何商用呢?

0
#82jyblbq1314回复于2018-10-24 19:56:02
#80 Bzjgis回复
百度也有的在用java

百度是有用java的,但是java岗相对少了很多。

0
#81jyblbq1314回复于2018-10-24 19:55:24
#78 mxw2552261回复
头一次听说java少的。

是的,其实多了解下市场和猎头的消息,就清楚了。

0
TOP
切换版块