“声控”APP

编者:本文为携程机票研发部技术专家祁一鸣在携程技术微分享中的分享内容,关注携程技术中心微信公号ctriptech,获知更多一手干货。

【携程技术微分享】是携程技术中心推出的线上公开分享课程,每月1-2期,采用目前最火热的直播形式,邀请携程技术人,面向广大程序猿和技术爱好者,一起探讨最新的技术热点,分享一线实战经验,畅谈精彩技术人生,搭建一个线上的技术分享社区。

祁一鸣,2016年4月加入携程, 任机票研发部技术专家。毕业于美国常春藤名校Dartmouth College本科,曾先后在硅谷的Oracle, Yahoo!和Salesforce总部效力过。从scratch到delivery完成过的最成功的产品是年销售额超1亿美金的商业社区网站模板。平时喜欢吃冰激凌和甜甜圈, 也蛮喜欢上海野兽派的花。

_____________________

在6月中刚刚结束的2016苹果全球开发者大会上, 人工智能助手Siri又一次成为焦点。Siri Intelligence不仅已被加入到快速输入功能和照片应用中,苹果还将在iOS 10版本中第一次开放Siri SDK给广大开发者们,使用户通过自己的声音与各种iOS APP互动成为可能。

此次让我们在携程技术微分享中先睹为快,看看如何模拟Siri智能来设计并开发一款搜索和试听iTunes音乐的手机App。

分享内容分为上下两部分。上半部分以设计为主,我们将一起了解Siri SDK在iOS10中给用户带来的新功能,回顾了人工智能的发展史,并一起用Sketch和Principle两款工具设计声控音乐APP的页面和交互。

下半部分以开发为主,用Xcode和Objective-C来实现APP页面开发。同时将用一款全新的移动端软件开发工具包资源来做语音识别,将我们想听歌曲的名字从声音转化成文字。之后,通过苹果iTtunes搜索API接口来获取歌名的专辑图片和歌曲试听资源。最后,将这些资源整合在一起,用精细的UI动画效果来开发完成这款声控音乐APP。

一起来体验下自己完整做件产品的快乐吧~

设计部分

将用到的设计工具包括Sketch和Principle。

Sketch (http://sketchapp.com/)是一款专为产品和UI设计师量身定做的设计工具, 它在2015在设计工具中被评为APP of the Year.  比起传统型的photoshop设计工具, Sketch更加轻量灵活,且价格便宜 。

我们先用Sketch绘制声控APP的第一个页面和第二个页面的prototype。 包括用Sketch自带的iOS UI Design 模板添加status bar,  用Sketch自带的绘图工具添加文字Label, 背景形状图案,图片。

之后, 我们在Principle里导入 用Sketch设计的两张页面。 Principle是一款实现每个设计页面之间动画衔接的工具。它可以直接import Sketch设计稿,在设计稿页面之上添加丰富的动画。 作为一款业界有名的设计动画工具, Principle在硅谷也是被设计师们广泛使用的。

首先我们在Principle里复制一张和设计稿第一页显示一模一样的 Artboard放在第一页之后。 当用户点击第一页中的麦克风图标之后,Principle将自动跳转到第二页, 我们对相应的提示文案做修改, 并实现一个新的动画:在第一页点击麦克风后,第二页的麦克风将围绕着图标中心旋转, 以此作为APP正在倾听用户声音的提示。 最后,当麦克风旋转的动画结束后,再添加一个自动跳转到第三页的动画,让用户看到搜索到音乐。三个页面的衔接如下图。

实现的动画可以从以下的gif中看到。

至此, 我们用Sketch和 Principle完成了一款“声控”APP的原型prototype以及页面交互设计。 主流程是, 用户用手tap麦克风, 麦克风旋转加上页面文案提示 告知用户APP正在倾听用户声音, 当APP解析到用户声音并找到相关的歌曲以后, 将跳转到下一页显示歌曲的专辑图片以及播放一段音乐的节选。

开发部分

完成设计之后,我们将更换装备,用Xcode和Objective-C来开发这款 智能音乐APP 。我们将使用一款全新的移动端软件开发工具包资源来做语音识别,将我们想听歌曲的名字从声音转化成文字。之后,通过苹果的音乐搜索API接口来获取歌名的专辑图片和歌曲试听资源。

开发完成以后的project结构如下:

首先来介绍 在APP中如何实现 智能识别用户语音的功能。 语音识别是人工智能应用广泛的一个领域。在众多已有科技中, 我选择了使用Nuance Speech Kit 2 的iOS SDK来实现APP中的功能。SpeechKit的具体使用指南可以在 https://developer.nuance.com/public/Help/DragonMobileSDKReference_iOS/Overview.html 中找到。在这个Xcode project中, 我们会用 CocoaPods (https://cocoapods.org/)来维护工程依赖。在Project的目录下, 新建一个名为 Podfile 文件, 然后在Podfile里添加一行

pod ‘SpeechKit’

保存文件后, 在本地App目录下, 执行命令

pod install

安装成功后,打开 .xcworkspace 工程 可以直接通过以下的import语句来使用SpeechKit

#import <SpeechKit/SpeechKit.h> 

安装成功后, 还需要在Nuance 的官网上注册一个开发者账号, 得到访问服务器的URL地址以及一个APP KEY,在之后调用云端的语音识别服务时会用到。

在下面的代码中, 将SKSServerUrl和SKSAppKey 替换成你账号里显示的数值。 这段代码起到的作用就是建立一个语音识别的session, 然后开始一个transaction去做automatic speech recognition识别手机设备听到的语音:

Transaction成功以后的delegate回调方法里,我们只需获取recognition 参数里的最佳text推荐, 它便是对语音识别出最好的文字。

识别了语音之后, 我们接下来要做的便是去获取与识别文字相关的音乐了。 苹果自己就有这样的公共接口可以让我们使用。

https://itunes.apple.com/search?term=牛仔很忙

假设我对着APP说出了一首周杰伦的歌 “牛仔很忙”, 那么通过HTTP调用以上的url的发一个GET请求, 苹果就会通过搜索iTunes音乐库里返回所有的与“牛仔很忙”相关的所有音乐数据。

为了使demo的逻辑尽量简单, 我在之前的url里加上一个参数, 把返回的结果数量控制在一。

https://itunes.apple.com/search?term=牛仔很忙&limit=1

这样一来,我从仅返回的一首歌的数据里获取关于这首“牛仔很忙”歌曲的专辑图片地址以及试听歌曲地址, 再把这些数据拼凑起来,组成一张页面, 就有了我们在设计稿中看到的第三页。

至于每个页面中的动画交互,则是由基本的CABasicAnimation 来完成。例如, 麦克风图标的旋转动画的代码如下。

综合涉及的各个点,我们就开发完成了一款智能声控的音乐APP。两张Sketch设计稿, 三张Principle交互页面, 便有了这样一款娱乐的APP。 更多细节内容, 请大家移步观看视频

 
 
标签: 人工智能

“声控”APP的更多相关文章

  1. 从设计到开发,硅谷技术专家教你做“声控”APP

    编者:本文为携程机票研发部技术专家祁一鸣在携程技术微分享中的分享内容,关注携程技术中心微信公号ctriptech,获知更多一手干货. [携程技术微分享]是携程技术中心推出的线上公开分享课程,每月1-2 ...

  2. 基于脑波眼电-语音-APP控制的多功能智能轮椅

    前言:这个项目是在2016-2017完成的,做的很浅显,贴出来与大家分享,希望能有帮助. 摘要 本项目主要是针对脑电信号控制的智能轮椅的设计,脑电控制是智能医疗领域的重要研究方向,旨在帮助行动不便但智 ...

  3. App开发:模拟服务器数据接口 - MockApi

    为了方便app开发过程中,不受服务器接口的限制,便于客户端功能的快速测试,可以在客户端实现一个模拟服务器数据接口的MockApi模块.本篇文章就尝试为使用gradle的android项目设计实现Moc ...

  4. Android Studio配置 AndroidAnnotations——Hi_博客 Android App 开发笔记

    以前用Eclicps 用习惯了现在 想学学 用Android Studio 两天的钻研终于 在我电脑上装了一个Android Studio 并完成了AndroidAnnotations 的配置. An ...

  5. Android请求网络共通类——Hi_博客 Android App 开发笔记

    今天 ,来分享一下 ,一个博客App的开发过程,以前也没开发过这种类型App 的经验,求大神们轻点喷. 首先我们要创建一个Andriod 项目 因为要从网络请求数据所以我们先来一个请求网络的共通类. ...

  6. 【原创分享·支付宝支付】HBuilder打包APP调用支付宝客户端支付

    前言 最近有点空余时间,所以,就研究了一下APP支付.前面很早就搞完APP的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还 ...

  7. SQLSERVER走起 APP隆重推出

    SQLSERVER走起 APP隆重推出 为方便大家查看本微信公众以前推送的文章,QQ群里面的某位SQLSERVER重度爱好者开发了<SQLSERVER走起>的APP 以供大家一起交流 网页 ...

  8. 从中间件的历史来看移动App开发的未来

    在移动开发领域我们发现一个很奇怪的现象:普通菜鸟新手经过3个月的培训就可以拿到 8K 甚至上万的工作:在北京稍微有点工作经验的 iOS 开发,就要求 2 万一个月的工资.不知道大家是否想过:移动应用开 ...

  9. 搞个这样的APP要多久?

    这是一个“如有雷同,纯属巧合”的故事,外加一些废话,大家请勿对号入座.开始了…… 我有些尴尬地拿着水杯,正对面坐着来访的王总,他是在别处打拼的人,这几年据说收获颇丰,见移动互联网如火如荼,自然也想着要 ...

随机推荐

  1. ural 1180 Stone Game

    http://acm.timus.ru/problem.aspx?space=1&num=1180 #include <cstdio> #include <cstring&g ...

  2. MCS-51单片机I/O端口的存取

    MCS-51单片机通常有4个8位I/O端口, 向各端口的写数据均写入到对应端口的锁存器中, 但对各端口的读操作却有两个方式:读锁存器和读引脚 1 读-修改-写操作    Pn(指P0,P1,P2,P3 ...

  3. Bug解决过程复盘

    反思了下,解决问题无外乎3w1h when where who how 就是查询出来的事情多了,现在不知道哪个地方出问题,应该根据日志一步一步梳理,查看每一步的输出结果是否与预期一致 顺藤摸瓜 觉得不 ...

  4. linux中fork()函数

    man fork: FORK() Linux Programmer's Manual FORK(2) NAME fork - create a child process SYNOPSIS #incl ...

  5. Java基础加强学习笔记(二)

    一.反射的基础Class类 1.如何得到各个字节码对应的实例对象 (1)类名.class,例如 System.class (2)对象.getClass(),例如 new Data().getClass ...

  6. SGU 0438 The Glorious Karlutka River =) 动态流

    题目大意:有一条东西向流淌的河,宽为W,河中有N块石头,每块石头的坐标(Xi, Yi)和最大承受人数Ci已知.现在有M个游客在河的南岸,他们想穿越这条河流,但是每个人每次最远只能跳D米,每跳一次耗时1 ...

  7. ajax取返回值的方法

    var check_res; //ajax核对手机验证码 function smsverify(){ var ajaxurl = APP_ROOT+"/index.php?ctl=ajax& ...

  8. 常用JS模板

    var _win, _doc, _stt, _do = document.domain, _arr = _do.split("."); function _st() { try { ...

  9. Java_io体系之PipedWriter、PipedReader简介、走进源码及示例——14

    Java_io体系之PipedWriter.PipedReader简介.走进源码及示例——14 ——管道字符输出流.必须建立在管道输入流之上.所以先介绍管道字符输出流.可以先看示例或者总结.总结写的有 ...

  10. POJ 3254 Corn Fields (状态压缩DP)

    题意:在由方格组成的矩形里面种草,相邻方格不能都种草,有障碍的地方不能种草,问有多少种种草方案(不种也算一种方案). 分析:方格边长范围只有12,用状态压缩dp好解决. 预处理:每一行的障碍用一个状态 ...