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

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

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

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

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

此次讓我們?cè)跀y程技術(shù)微分享中先睹為快，看看如何模擬Siri智能來(lái)設(shè)計(jì)并開(kāi)發(fā)一款搜索和試聽(tīng)iTunes音樂(lè)的手機(jī)App。

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

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

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

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

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

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

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

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

實(shí)現(xiàn)的動(dòng)畫(huà)可以從以下的gif中看到。

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

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

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

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

pod ‘SpeechKit’

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

pod install

安裝成功后，打開(kāi) .xcworkspace 工程 可以直接通過(guò)以下的import語(yǔ)句來(lái)使用SpeechKit

import 

安裝成功后， 還需要在Nuance 的官網(wǎng)上注冊(cè)一個(gè)開(kāi)發(fā)者賬號(hào)， 得到訪問(wèn)服務(wù)器的URL地址以及一個(gè)APP KEY，在之后調(diào)用云端的語(yǔ)音識(shí)別服務(wù)時(shí)會(huì)用到。

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

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

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

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

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

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

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

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

至于每個(gè)頁(yè)面中的動(dòng)畫(huà)交互，則是由基本的CABasicAnimation 來(lái)完成。例如， 麥克風(fēng)圖標(biāo)的旋轉(zhuǎn)動(dòng)畫(huà)的代碼如下。

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