现在市场上智能音箱琳琅满目,一句话就能听歌,读诗,他们是怎么做到的呢?我们这一篇来讲讲如何利用微信小程序和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 + "×tamp=" + 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 + "×tamp=" + 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 查看加入方法
目前来看不需要后台
不是百度的,自己搞着玩的,欢迎随时交流,可以加微信群一起交流
求源码
请问你是百度公司的吗?这个小程序很不错!赞!我正在重复你的方法。希望可以交流!
为什么处理不了,还需要后台处理?
sessionId: this.sessionId ? this.sessionId : ''
是什么意思,这段是向哪里提交请求?
谢谢谢谢
很不错的小程序。
也是,会多方面考虑的。
你要是当老板你也不会让他们下线的
对,这是把所有的自己常用的信息堵在了一个商家上,还好小程序背后面对的是不同的商家,商家本身的app没有下线。
现在好多人都用微信工作,也是让人头疼~~
是的,正解
其实好的公司也是用微信小程序给app导流
再一个就是不能把鸡蛋放到一个篮子里,万一微信不行了。里面的小程序都没活路了,虽然这是不太可能的假设,但是企业也不会这么干啊。
因为微信的用户量实在是太大了。小程序相当于入口,然后让用户下载app来用。导流吧。总比直接下载app让人觉得麻烦
其实目前好多应用app里面带了自己的小程序,把原来的页面去掉了,但是app还是要有,这样还是没有节省用户的使用。
哦,我看淘宝上也有好多这种的小程序。
要看什么小程序了吧。比如我经常用的那个开发票时候记录税号的那个挺方便的,扫码然后选择要开的发票,商家就直接打印出来了
小程序还是不普遍,使用起来不是很方便