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

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

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

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

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

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

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

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

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

將用到的設(shè)計工具包括Sketch和Principle。

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

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

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

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

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

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

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

開發(fā)完成以后的project結(jié)構(gòu)如下：

首先來介紹 在APP中如何實現(xiàn) 智能識別用戶語音的功能。 語音識別是人工智能應(yīng)用廣泛的一個領(lǐng)域。在眾多已有科技中， 我選擇了使用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ā)者賬號， 得到訪問服務(wù)器的URL地址以及一個APP KEY，在之后調(diào)用云端的語音識別服務(wù)時會用到。

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

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

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

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

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

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

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

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

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

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