开发者社区> 龙哥手记> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

小白也可以搭建一个属于你的语音小程序

简介: 有用知识又增加喽😊
+关注继续查看

一,认识下

有可能你第一次听说,语音小程序是由阿里巴巴人工智能实验室和蚂蚁金服共同打造的在带屏设备上的创新性小程序应用,场景非常灵活也非常强大的哈。

image

语音小程序是一种全新的应用开发模式,不仅继承了蚂蚁金服小程序的基础设施,而且还加上了人工智能实验室的语音交互能力。从而实现了“触控操作”和“语音操作”两种形式。      

  • 并且小程序可以投放到天猫精灵的多端设备上,在家庭、运营商、教育、零售、航旅等行业上能够更深层次触达用户。
  • 并且还给开发者提供了商业盈利模式,不止能支持便捷的支付能力,而且还有多种形式的广告投放与盈利能力。


1)小程序的技术框架

           image


            image


3)语音小程序的生命周期

image

天猫精灵小程序是基于支付宝小程序开发的,所以开发套件也同时被集成在支付宝小程序开发工具里面

  • 最大特点拥有语音交互能力,可使用语音进行操作;
  • 可以通过调用词语音唤醒小程序;
  • 语音能力通过智能应用平台配置语音交互模型实现;
  • 开发过程需要理解语音交互模型小程序之间的配置关系;
  • 可以通过智能应用平台-市场向所有商家展示,并在被选择加载之后,在设备可用。



二、创建小程序

首先登录支付宝开放平台,进入到控制台。

如果是公司主导开发的小程序,尽量使用公司 支付宝主账号 登录创建小程序,这样可以在创建小程序后,在成员管理中添加子账号的开发成员来完成开发。

image

如图所示,创建应用->小程序,进入小程序创建页面,按照小程序创建页面指引完成小程序的简单创建。


image

进入小程序 开发设置 页面,在 多端发布支持 页面中,开通 天猫精灵 的多端发布选项。



三、下载小程序开发工具

切换到 天猫精灵 端,进入 版本管理 页面,下载开发工具。或进入 开发工具下载页 下载安装就行。

image

如果说你下载的最新版小程序IDE出现推送预览不成功的情况,或上传版本没有在技能应用平台关联的开发者账户下自动创建小程序应用的情况,请选择下载 v1.17 稳定版 小程序IDE就能解决啦。



四、创建小程序项目

打开小程序开发者工具,创建 天猫精灵 小程序项目,名字你的习惯来起;

敲黑板啊:不要选择 天猫精灵APP 项目类型哦

image


创建后进入小程序开发页面。此时若没有登录,会弹出登录二维码。

请使用 创建小程序的账号/小程序开发者账号 扫码并完成登录;

image


若项目从未没有绑定过小程序,那么会自动弹出关联应用的弹窗,点击下拉框,选择要关联的小程序完成关联就可以啦!

image


然后点击 请选择设备,在设备列表中 添加设备,根据页面指导输入天猫精灵设备上播报的验证码,点击确认即可完成调试设备的添加啦,这些都是前期准备工作哈。

image



五、配置小程序应用

智能语音小程序,是开发者自己管理的小程序应用,需要开发者登录智能应用平台手动创建语音交互模型,并配置应用调用词,用户可以通过使用调用词进入小程序,这个再熟悉不过啦,请看我写这篇:https://developer.aliyun.com/article/907489?spm=a2c6h.13148508.setting.13.5bca4f0ep2ThMW

4.1 入驻智能应用平台

现在登录智能应用平台,打开 小程序 列表页面如下图所示

image


4.2 然后关联支付宝开发者账号

点击右上方关联支付宝账号,或点击自己的用户头像进入用户中心页面,点击绑定支付宝账号;

请确保关联的是 登录小程序IDE上传小程序版本 的支付宝账号,千万不要关联错了哈


4.3 上传小程序版本

若小程序应用在 技能应用平台 开发者账号下管理,请先检查以下条件:

  1. 支付宝小程序端已开通天猫精灵的 多端发布;
  2. 小程序IDE中,创建小程序项目时选择 天猫精灵 小程序
  3. 技能应用平台的开发者账号关联了 登录小程序IDE 的支付宝账号;
  4. 上传版本前,先绑定一个 带屏天猫精灵设备


当以上条件确认满足,可以在小程序IDE中将默认的项目上传一个版本,即可在智能应用平台 小程序列表 中找到该小程序应用。如果没有出现在小程序列表中,请检查以上要求重新上传版本操作;

敲黑板啦:如果下载的最新版小程序IDE出现推送预览不成功,或上传版本没有在技能应用平台关联的开发者账户下自动创建小程序应用,请选择下载 v1.17 稳定版 小程序IDE。

4.4 然后填写基本信息

在配置语音交互模型之前,需要先补充小程序智能应用的基本信息,这个比较简单吧

image


补充完成后,可以看到 小程序应用 secretKey,用于在 小程序项目 中注册语音能力,这个最好复制在剪切板上面;


4.5 配置语音交互模型

语音交互模型的配置请看语音交互模型 来熟悉下。

这里小程序智能应用会自动创建一个默认意图,这个不知道啥意思的,请你看下我上篇文章你就明白了,通常情况下,只需对意图进行语料和参数配置即可使用。


4.6 配置页面意图

小程序 在设备交互时,设备通常处于小程序的某个页面,要使页面支持语音交互,需要为页面配置页面意图,当用户话术命中意图语料时,触发页面语音交互


点击左侧 配置页面意图,进入配置页面意图页面,点击 新增配置,进入 配置页面执行意图页面,填写小程序的页面地址小程序项目中的 pageId),勾选需要执行的 页面执行意图提交 保存即可生效;

image


后续可通过 配置页面执行意图 列表,点击 详情,查看详细配置信息,如有需要,还可以通过 编辑 进行修改;


这里配置的页面地址页面执行意图,需要与小程序页面的xxx.js对应,然后详情请查看小程序配置就可以啦!



六、小程序页面开发

当语音交互模型配置好之后,就可以在小程序项目中开发页面和语音交互的逻辑了。


6.1 页面中注册语音能力

在页面的xxx.jsonShow方法中增加语音能力注册,示例如下:

my.call('useCustomSkill', {
  skillName: '支付宝小程序Id(小程序应用基本信息里的 MiniAPP_ID)',
  secretKey: '从基本信息页面获得',
  pageId: '语音交互模型-->配置页面意图 中创建的页面地址'
})


6.2 页面中接收语音回调

  • API:onVoiceEvent(event)
  • 说明:如果语音指令命中了当前页面的语音配置(pageId关联意图的语料),则会调用page内的onVoiceEvent()方法。详细请下文档:小程序API哈,里面写的很清楚;
Page({
   
  onVoiceEvent(event){
    my.alert({content: "onVoiceEvent = " + JSON.stringify(event)}); 
  },
   
});

示例数据

{
  "command":"NluResult",
  "domain":"AliGenie.Text",
  "param":{
    "domain":"通常为小程序名称",
    "intent":"意图的名称,skill.json方式的commands配置的名称",
    "query":"用户的原始话术",
    "slots":[]
  }
}


6.3 页面开发

小程序页面开发请看下,这里不过多赘述:小程序开发文档


七、怎么真机调试

选中调试设备后,即可通过真机预览的方式,将小程序推送到设备上运行。测试小程序页面在真机设备上的展示效果和语音交互的效果。

image


八、常用的语音API


8.1 语音回调

  • API:onVoiceEvent
  • 说明:如果语音指令命中了当前页面的语音配置(pageId关联意图的语料),则会调用page内的onVoiceEvent方法如下
Page({
   
  onVoiceEvent(event){
    my.alert({content: "onVoiceEvent = " + JSON.stringify(event)}); 
  },
   
});

示例数据

{
  "command":"NluResult",
  "domain":"AliGenie.Text",
  "param":{
    "domain":"通常为小程序名称",
    "intent":"意图的名称,skill.json方式的commands配置的名称",
    "query":"用户的原始话术",
    "slots":[]
  }
}

回调字段说明下

属性名

说明

domain

领域名称

command

指令名称

param

NLU结果


param说明

属性名

说明

domain

通常为小程序名称

intent

意图的名称

query

用户原始语句

slots

属性槽,用来存放获取到的参数


slots说明

属性名

说明

value

归一化之后的结果

domainSlot

slot和实体的映射关系

liveTime

slot存在轮数

norm

已废弃,请使用value

name

slot名称


8.2 播报 TTS

  • API:my.tg.playTTS
  • 入参说明:

属性

类型

必填

说明

content

String

TTS播报的内容

openMic

Boolean

是否在播报结束后开麦,默认false


  • reponse

回调方法

说明

success

tts播报结束回调此函数

fail

tts播放内容为空,或者被打断时回调此函数


怎么使用

my.tg.playTTS({
  content: '请问你要选第几个', 
  openMic: true,
  success: function(res) {
    console.log("playTTS complete " + JSON.stringify(res))
  },
  fail: function(res) {
    console.log("playTTS fail " + JSON.stringify(res))
  }
});

8.3 模拟语音请求

  • API:my.tg.nlpRequest
  • 入参说明:

属性名

描述

text

模拟语音请求的内容,string类型

使用示例如下

my.tg.nlpRequest({text: "今天天气"});


8.4 获取设备信息

  • API: my.call("getGenieDeviceInfo")
  • 功能:获取设备信息

使用示例如下

my.call('getGenieDeviceInfo', function(result) {
  my.alert({
    content: JSON.stringify(result);
  })
})

返回示例

{
  "code":"0",
  "data":{
      "openUUID":"混淆后的设备唯一ID"
  },
  "msg":"Success"
}


8.5 其他API

  • API:my.call

使用示例如下

//隐藏顶部导航栏
my.call('hideNavigationBar');
//显示顶部导航栏
my.call('showNavigationBar');
//模拟物理按键,当前仅支持BACK、HOME两种键值
my.call("sendKeyEvent", {"keyCode": "BACK"});


九、小程序发布

  1. 小程序智能应用在发布前,需要在智能应用平台应用发布页面填写应用的发布信息,请看如何发布内容
  2. 填写完发布内容后,去支付宝开放平台将需要发布的版本提交审核
  3. 如果审核通过,需要去支付宝开放平台将审核通过的版本进行发布,发布后天猫精灵的用户就可以在天猫精灵带屏设备上使用这个小程序了,制作完成;

天猫精灵开发平台官网 快来戳:https://www.aligenie.com/


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《C++语言基础》程序阅读——运算符重载(一)
返回:贺老师课程教学链接 //(1) #include <iostream> using namespace std; class Sample { private: int x; public: Sample () { } Sample(int a){x=a;} void disp(){cout<<"x="<<x<
709 0
小程序环境搭建
1.注册 点击小程序进入,选择注册。注册的用户名要注意,不能注册过微信公众平台和微信开放平台。 图1.png 图2.png 2.登录 图3.png 3. AppID(小程序ID) 在菜单 “设置”-“开发设置” 看到小程序的 AppID, 类似于手机App的报名。
606 0
一个不被程序员认为是编程语言的语言
HTML究竟算不算是一门编程语言,这是争执已久的话题。其实,从本质来讲,HTML确实算不上是一门编程语言。关注我,发现更多互联网有趣的无聊的! HTML全称,HyperText Markup Language。
423 0
程序员需要了解的硬核知识之汇编语言(一)(下)
之前的系列文章从 CPU 和内存方面简单介绍了一下汇编语言,但是还没有系统的了解一下汇编语言,汇编语言作为第二代计算机语言,会用一些容易理解和记忆的字母,单词来代替一个特定的指令,作为高级编程语言的基础,有必要系统的了解一下汇编语言,那么本篇文章希望大家跟我一起来了解一下汇编语言。
0 0
程序员需要了解的硬核知识之汇编语言(一)(下)
之前的系列文章从 CPU 和内存方面简单介绍了一下汇编语言,但是还没有系统的了解一下汇编语言,汇编语言作为第二代计算机语言,会用一些容易理解和记忆的字母,单词来代替一个特定的指令,作为高级编程语言的基础,有必要系统的了解一下汇编语言,那么本篇文章希望大家跟我一起来了解一下汇编语言。
0 0
程序员需要了解的硬核知识之汇编语言(一)(下)
之前的系列文章从 CPU 和内存方面简单介绍了一下汇编语言,但是还没有系统的了解一下汇编语言,汇编语言作为第二代计算机语言,会用一些容易理解和记忆的字母,单词来代替一个特定的指令,作为高级编程语言的基础,有必要系统的了解一下汇编语言,那么本篇文章希望大家跟我一起来了解一下汇编语言。
0 0
一文读懂基于小程序的图像识别(下)
一文读懂基于小程序的图像识别(下)
0 0
微信小程序|搭建一个博客小程序(下)
微信小程序|搭建一个博客小程序(下)
0 0
+关注
龙哥手记
微信搜索「龙哥手记」,回复关键字:见面礼
文章
问答
文章排行榜
最热
最新
相关电子书
更多
支付宝小程序教程
立即下载
小程序云应用入门实操系列课程 - 第四讲
立即下载
小程序云应用入门实操系列课程 - 第一讲
立即下载