基于HTML5+Nodejs+百度人臉識別音樂播放器的設計與實現

吳燎

摘 要：隨著人工智能的火熱發展，與人工智能相關軟件的需求也越來越大。然而，目前并沒有一款關于人臉識別技術應用于音樂播放器的軟件。由于軟件用戶端的多樣化，針對不同的用戶端需要開發不同的軟件，造成資源的極大浪費。基于HTML5+Nodejs的人臉識別播放器填補人臉識別播放器與音樂播放器結合的空白，解決多端同時運行的軟件的問題。只需要在瀏覽器上運行即可享受人工智能與音樂娛樂結合的體驗。

關鍵詞：HTML5;人臉識別;音樂播放器

隨著人工智能的發展，圖像識別，人臉識別的技術也越來越成熟，將人臉識別應用于音樂播放器，可以通過人臉識別，識別人體的面部情緒，根據情緒的好壞推送音樂，達到智能化播放音樂的目的。也可以通過人臉識別情緒，根據情緒改變軟件界面，達到緩解用戶心情的效果。為了能夠保證與傳統pc端的兼容，本文實現了基于html5[1]和nodejs的人臉識別音樂播放器。

1 系統的總體設計

目前移動端的軟件開發模式主要有兩種，[2]一種是native app，是根據手機具體的環境而開發的，例如安卓端的java開發，蘋果端的objective-c等。Native app開發模式的缺點就是效率低，無法跨平臺運行，開發一套系統軟件需要在安卓和蘋果端進行不同的重復開發，造成資源的浪費。另一種是web app，基于手機瀏覽器，任何安裝了瀏覽器的移動端都可以運行，從而實現跨平臺運行的目的。它具有免安裝，免升級的特點。用戶無需安裝龐大的軟件包安裝，只需要輸入網址，掃描二維碼即可運行，而在軟件升級的時候只需要更改web的服務器文件。Html5的到來讓webapp也能做到native app可以做到的事情，例如播放視頻，音樂動畫等。Ajax和json技術讓頁面與服務器的數據交換量大大降低，從而提升用戶的體驗。CDN[3]網絡技術的出現，讓頁面的加載更加迅速，其加載時間可以媲美native app。Nodejs的出現可以讓前端的開發語言在服務器端運行。在不久的將來通過web技術的進一步發展，web app將是未來發展的主流。

2 相關技術

2.1 百度人臉識別api

百度人臉識別是為企業和個人提供人臉識別服務的一個接口，包括了JavaScript接口，安卓sdk，ios的sdk等。可以實現用戶上傳人臉識別的圖片，返回人臉識別的結果。包括人臉的旋轉角度，人臉的遮擋程度，人臉的情緒等等。本次系統采用的是JavaScript api接口，適用于pc和移動端通過瀏覽器訪問

2.2 網易云音樂nodejs api

網易云音樂nodejs 版api是通過跨站請求偽造（CSRF），偽造請求頭，調用官方 API，它提供了獲取歌曲表單的接口，通過nodejs去調用API接口，返回歌曲表單的所有歌曲信息，包括歌單的類別，歌單的列表。提供獲取歌曲詳情信息的接口，可以返回歌曲的名字，播放音樂鏈接等。

2.3 Canvas

2.4 Ajax

Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創建交互式網頁應用的網頁開發技術。Ajax具有局部刷新網頁的特點，可以在網頁之間傳遞數據。通過JavaScript的HttpObject對象在網頁之間形成信息交互，局部刷新需要改變的部分網頁，而無需整體刷新網頁導致資源浪費，減少了用戶等待的時間，增加了用戶體驗效果。

3 系統的模塊化設計與實現

3.1 獲取人臉識別圖片

在手機上通過攝像頭拍照獲取圖片很容易，只需要使用原生系統拍照，利用瀏覽器調用文件api即可上傳照片，但是這樣只能人為地上傳，不能滿足實時性。其解決的辦法是利用html5的vedio組件，在瀏覽器上調用手機攝像頭的api，再通過canvas畫布繪制攝像頭捕捉的瞬時畫面，達到拍照獲取照片的效果。Video組件可讓瀏覽器獲取攝像頭畫面，但僅能顯示攝像頭畫面，并不能獲取圖片。在事件觸發情況下通過canvas繪制照片，就要用到canvas的drawImage（）方法來實現。觸發事件后即可在video上繪制圖像。

3.2 發送圖片到百度人臉識別api

在獲取了照片之后立馬發送到百度api，但百度的api文檔要求圖片必須以base64格式傳輸，因此在發送照片之前必須要對圖片進行轉碼，轉碼需要用到canvas對象的toDataURL（）函數，發送圖片利用ajax技術發送，按照百度api文檔的說明，發送的地址應當附帶申請的百度密匙，發送的內容要指明傳輸的數據格式以及請求的參數，請求的返回人臉識別的表情（emotion）參數。當正確返回時，瀏覽器會得到人的臉部表情如happy，sad，surprise等等。

3.3 請求網易云音樂api獲取歌單

當瀏覽器收到識別的表情，根據表情發送Ajax請求對應的歌單。例如，happy匹配輕松歡樂的歌單，sad匹配沉重悲傷的歌單等。請求對應歌單的數據，當瀏覽器成功接受到歌單信息時，隨機從歌單中獲取歌曲的id。

3.4 獲取歌曲鏈接

獲取了歌曲的id號就可以通過ajax請求歌曲的播放鏈接，通過Html的audio組件播放音樂。

4 總結

參考文獻：

[1]黃永慧，陳程凱.HTML5在移動應用開發上的應用前景[J].計算機技術與發展，2013（7）：207-210.

[2]鐘迅科.基于HTML5的跨平臺移動Web應用與混合型應用的研究[J].現代計算機（專業版），2014（13）.

[3]覃鳳萍.基于HTML5+jQuery Mobile 的移動Web 應用開發研究[J].大眾科技，2015，15（7）：9-10.