摘要：祁一鳴，年月加入攜程，任機票研發(fā)部技術專家。在月中剛剛結束的蘋果全球開發(fā)者大會上人工智能助手又一次成為焦點。作為一款業(yè)界有名的設計動畫工具，在硅谷也是被設計師們廣泛使用的。綜合涉及的各個點，我們就開發(fā)完成了一款智能聲控的音樂。

編者：本文為攜程機票研發(fā)部技術專家祁一鳴在攜程技術微分享中的分享內容，關注攜程技術中心微信公號ctriptech，獲知更多一手干貨。

【攜程技術微分享】是攜程技術中心推出的線上公開分享課程，每月1-2期，采用目前最火熱的直播形式，邀請攜程技術人，面向廣大程序猿和技術愛好者，一起探討最新的技術熱點，分享一線實戰(zhàn)經(jīng)驗，暢談精彩技術人生，搭建一個線上的技術分享社區(qū)。

祁一鳴，2016年4月加入攜程， 任機票研發(fā)部技術專家。畢業(yè)于美國常春藤名校Dartmouth College本科，曾先后在硅谷的Oracle, Yahoo!和Salesforce總部效力過。從scratch到delivery完成過的最成功的產(chǎn)品是年銷售額超1億美金的商業(yè)社區(qū)網(wǎng)站模板。平時喜歡吃冰激凌和甜甜圈， 也蠻喜歡上海野獸派的花。

在6月中剛剛結束的2016蘋果全球開發(fā)者大會上, 人工智能助手Siri又一次成為焦點。Siri Intelligence不僅已被加入到快速輸入功能和照片應用中，蘋果還將在iOS 10版本中第一次開放Siri SDK給廣大開發(fā)者們，使用戶通過自己的聲音與各種iOS APP互動成為可能。

此次讓我們在攜程技術微分享中先睹為快，看看如何模擬Siri智能來設計并開發(fā)一款搜索和試聽iTunes音樂的手機App。

分享內容分為上下兩部分。上半部分以設計為主，我們將一起了解Siri SDK在iOS10中給用戶帶來的新功能，回顧了人工智能的發(fā)展史，并一起用Sketch和Principle兩款工具設計聲控音樂APP的頁面和交互。

下半部分以開發(fā)為主，用Xcode和Objective-C來實現(xiàn)APP頁面開發(fā)。同時將用一款全新的移動端軟件開發(fā)工具包資源來做語音識別，將我們想聽歌曲的名字從聲音轉化成文字。之后，通過蘋果iTtunes搜索API接口來獲取歌名的專輯圖片和歌曲試聽資源。最后，將這些資源整合在一起，用精細的UI動畫效果來開發(fā)完成這款聲控音樂APP。

一起來體驗下自己完整做件產(chǎn)品的快樂吧~

將用到的設計工具包括Sketch和Principle。

Sketch (http://sketchapp.com/)是一款專為產(chǎn)品和UI設計師量身定做的設計工具， 它在2015在設計工具中被評為APP of the Year. 比起傳統(tǒng)型的photoshop設計工具， Sketch更加輕量靈活，且價格便宜 。

我們先用Sketch繪制聲控APP的第一個頁面和第二個頁面的prototype。 包括用Sketch自帶的iOS UI Design 模板添加status bar, 用Sketch自帶的繪圖工具添加文字Label, 背景形狀圖案，圖片。

之后， 我們在Principle里導入 用Sketch設計的兩張頁面。 Principle是一款實現(xiàn)每個設計頁面之間動畫銜接的工具。它可以直接import Sketch設計稿，在設計稿頁面之上添加豐富的動畫。 作為一款業(yè)界有名的設計動畫工具， Principle在硅谷也是被設計師們廣泛使用的。

首先我們在Principle里復制一張和設計稿第一頁顯示一模一樣的 Artboard放在第一頁之后。 當用戶點擊第一頁中的麥克風圖標之后，Principle將自動跳轉到第二頁， 我們對相應的提示文案做修改， 并實現(xiàn)一個新的動畫：在第一頁點擊麥克風后，第二頁的麥克風將圍繞著圖標中心旋轉， 以此作為APP正在傾聽用戶聲音的提示。 最后，當麥克風旋轉的動畫結束后，再添加一個自動跳轉到第三頁的動畫，讓用戶看到搜索到音樂。三個頁面的銜接如下圖。

實現(xiàn)的動畫可以從以下的gif中看到。

至此， 我們用Sketch和 Principle完成了一款“聲控”APP的原型prototype以及頁面交互設計。 主流程是， 用戶用手tap麥克風， 麥克風旋轉加上頁面文案提示 告知用戶APP正在傾聽用戶聲音， 當APP解析到用戶聲音并找到相關的歌曲以后， 將跳轉到下一頁顯示歌曲的專輯圖片以及播放一段音樂的節(jié)選。

完成設計之后，我們將更換裝備，用Xcode和Objective-C來開發(fā)這款 智能音樂APP 。我們將使用一款全新的移動端軟件開發(fā)工具包資源來做語音識別，將我們想聽歌曲的名字從聲音轉化成文字。之后，通過蘋果的音樂搜索API接口來獲取歌名的專輯圖片和歌曲試聽資源。

開發(fā)完成以后的project結構如下：

首先來介紹 在APP中如何實現(xiàn) 智能識別用戶語音的功能。 語音識別是人工智能應用廣泛的一個領域。在眾多已有科技中， 我選擇了使用Nuance Speech Kit 2 的iOS SDK來實現(xiàn)APP中的功能。SpeechKit的具體使用指南可以在 https://developer.nuance.com/... 中找到。在這個Xcode project中， 我們會用 CocoaPods （https://cocoapods.org/）來維護工程依賴。在Project的目錄下， 新建一個名為 Podfile 文件， 然后在Podfile里添加一行

pod ‘SpeechKit’

保存文件后， 在本地App目錄下， 執(zhí)行命令

pod install

安裝成功后，打開 .xcworkspace 工程 可以直接通過以下的import語句來使用SpeechKit

import 

安裝成功后， 還需要在Nuance 的官網(wǎng)上注冊一個開發(fā)者賬號， 得到訪問服務器的URL地址以及一個APP KEY，在之后調用云端的語音識別服務時會用到。

在下面的代碼中， 將SKSServerUrl和SKSAppKey 替換成你賬號里顯示的數(shù)值。 這段代碼起到的作用就是建立一個語音識別的session， 然后開始一個transaction去做automatic speech recognition識別手機設備聽到的語音：

Transaction成功以后的delegate回調方法里，我們只需獲取recognition 參數(shù)里的最佳text推薦， 它便是對語音識別出最好的文字。

識別了語音之后， 我們接下來要做的便是去獲取與識別文字相關的音樂了。 蘋果自己就有這樣的公共接口可以讓我們使用。

https://itunes.apple.com/sear...牛仔很忙

假設我對著APP說出了一首周杰倫的歌 “牛仔很忙”， 那么通過HTTP調用以上的url的發(fā)一個GET請求， 蘋果就會通過搜索iTunes音樂庫里返回所有的與“牛仔很忙”相關的所有音樂數(shù)據(jù)。

為了使demo的邏輯盡量簡單， 我在之前的url里加上一個參數(shù)， 把返回的結果數(shù)量控制在一。

https://itunes.apple.com/sear...牛仔很忙&limit=1

這樣一來，我從僅返回的一首歌的數(shù)據(jù)里獲取關于這首“牛仔很忙”歌曲的專輯圖片地址以及試聽歌曲地址， 再把這些數(shù)據(jù)拼湊起來，組成一張頁面， 就有了我們在設計稿中看到的第三頁。

至于每個頁面中的動畫交互，則是由基本的CABasicAnimation 來完成。例如， 麥克風圖標的旋轉動畫的代碼如下。

綜合涉及的各個點，我們就開發(fā)完成了一款智能聲控的音樂APP。兩張Sketch設計稿， 三張Principle交互頁面， 便有了這樣一款娛樂的APP。 更多細節(jié)內容， 請大家移步觀看視頻。