微信小程序使用UNIT模拟【智能音箱】的功能
置顶
mxw2552261 发布于2018-05-20 22:54 浏览:8370 回复:43
6
收藏
最后编辑于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     查看加入方法 

收藏
点赞
6
个赞
共43条回复 最后由蓝兰兰111回复于2018-07-17 20:45
#2abcfanyuan回复于2018-05-21

真的非常棒!  学习了,也想试试,但是不会Java,小程序可以用Python吗?

0
#3mxw2552261回复于2018-05-21
#2 abcfanyuan回复
真的非常棒!  学习了,也想试试,但是不会Java,小程序可以用Python吗?
展开

小程序是微信的一套东西,服务端可以用java,python,都能做

0
#4756665228回复于2018-05-21

意思就是说个人也是可以用微信的语音、文本输入的?

是否会考虑开源小程序+后端代码呢?

0
#5荒墨丶迷失回复于2018-05-21
#4 756665228回复
意思就是说个人也是可以用微信的语音、文本输入的? 是否会考虑开源小程序+后端代码呢?
展开

小帅之前用微信小程序的录音功能 不能用嘛

1
#6mxw2552261回复于2018-05-21
#4 756665228回复
意思就是说个人也是可以用微信的语音、文本输入的? 是否会考虑开源小程序+后端代码呢?
展开

可以的哦,我会把代码发布到我的付费知识星球里,写代码不易,请理解支持。

还有一些内容无法公开发布,只能发在知识星球里。谢谢理解

0
#7756665228回复于2018-05-21
#6 mxw2552261回复
可以的哦,我会把代码发布到我的付费知识星球里,写代码不易,请理解支持。 还有一些内容无法公开发布,只能发在知识星球里。谢谢理解
展开

实时播放音视频流 实时录制音视频流 这俩貌似是个人无权限的。

你应该不是用这个了吧。

尊重你个人的决定。像我写的小程序认为没啥技术含量。就全部公开托管在gitee。随便大家用。

1
#8mxw2552261回复于2018-05-21
#7 756665228回复
实时播放音视频流 实时录制音视频流 这俩貌似是个人无权限的。 你应该不是用这个了吧。 尊重你个人的决定。像我写的小程序认为没啥技术含量。就全部公开托管在gitee。随便大家用。
展开

谢谢,小程序的内容我不是已经公开了吗?不也是随便用吗,哈哈。

0
#9蓝兰兰111回复于2018-05-21

可以上手开始做了

0
#10mxw2552261回复于2018-05-21
#9 蓝兰兰111回复
可以上手开始做了

加油

0
#11Leautolink回复于2018-05-22

非常棒,不错不错。

0
#12胡小森only回复于2018-05-25

very good,真的学习了,今天开始搞搞小程序,现在这么火,搭个顺风车。

0
#13蓝兰兰111回复于2018-05-25

百度7月份好像也要开发小程序平台

0
#14风灬丶18回复于2018-06-06

后台代码用java写的吗

0
#15mxw2552261回复于2018-06-06
#14 风灬丶18回复
后台代码用java写的吗

是的,用springboot写的

0
#16ywjacca回复于2018-06-07

unit看起来不错,决定玩玩

0
#17mxw2552261回复于2018-06-08
#16 ywjacca回复
unit看起来不错,决定玩玩

加油

0
#18Bzjgis回复于2018-06-11
#13 蓝兰兰111回复
百度7月份好像也要开发小程序平台

嗯嗯,是的,具体什么时候还没有确定了

0
#19蓝兰兰111回复于2018-06-13
#18 Bzjgis回复
嗯嗯,是的,具体什么时候还没有确定了

等开放了,可以体验一把

0
#20a17631544326回复于2018-06-13

UNIT功能挺强大呀

0
#21jyblbq1314回复于2018-06-14

现在的小程序慢慢开始替换了app,手机app还占空间

0
TOP
切换版块