基于HTML5+Nodejs+百度人臉識(shí)別音樂(lè)播放器的設(shè)計(jì)與實(shí)現(xiàn)

吳燎

摘 要：隨著人工智能的火熱發(fā)展，與人工智能相關(guān)軟件的需求也越來(lái)越大。然而，目前并沒(méi)有一款關(guān)于人臉識(shí)別技術(shù)應(yīng)用于音樂(lè)播放器的軟件。由于軟件用戶(hù)端的多樣化，針對(duì)不同的用戶(hù)端需要開(kāi)發(fā)不同的軟件，造成資源的極大浪費(fèi)?；贖TML5+Nodejs的人臉識(shí)別播放器填補(bǔ)人臉識(shí)別播放器與音樂(lè)播放器結(jié)合的空白，解決多端同時(shí)運(yùn)行的軟件的問(wèn)題。只需要在瀏覽器上運(yùn)行即可享受人工智能與音樂(lè)娛樂(lè)結(jié)合的體驗(yàn)。

關(guān)鍵詞：HTML5;人臉識(shí)別;音樂(lè)播放器

隨著人工智能的發(fā)展，圖像識(shí)別，人臉識(shí)別的技術(shù)也越來(lái)越成熟，將人臉識(shí)別應(yīng)用于音樂(lè)播放器，可以通過(guò)人臉識(shí)別，識(shí)別人體的面部情緒，根據(jù)情緒的好壞推送音樂(lè)，達(dá)到智能化播放音樂(lè)的目的。也可以通過(guò)人臉識(shí)別情緒，根據(jù)情緒改變軟件界面，達(dá)到緩解用戶(hù)心情的效果。為了能夠保證與傳統(tǒng)pc端的兼容，本文實(shí)現(xiàn)了基于html5[1]和nodejs的人臉識(shí)別音樂(lè)播放器。

1 系統(tǒng)的總體設(shè)計(jì)

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

2 相關(guān)技術(shù)

2.1 百度人臉識(shí)別api

百度人臉識(shí)別是為企業(yè)和個(gè)人提供人臉識(shí)別服務(wù)的一個(gè)接口，包括了JavaScript接口，安卓sdk，ios的sdk等?？梢詫?shí)現(xiàn)用戶(hù)上傳人臉識(shí)別的圖片，返回人臉識(shí)別的結(jié)果。包括人臉的旋轉(zhuǎn)角度，人臉的遮擋程度，人臉的情緒等等。本次系統(tǒng)采用的是JavaScript api接口，適用于pc和移動(dòng)端通過(guò)瀏覽器訪問(wèn)

2.2 網(wǎng)易云音樂(lè)nodejs api

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

2.3 Canvas

2.4 Ajax

Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。Ajax具有局部刷新網(wǎng)頁(yè)的特點(diǎn)，可以在網(wǎng)頁(yè)之間傳遞數(shù)據(jù)。通過(guò)JavaScript的HttpObject對(duì)象在網(wǎng)頁(yè)之間形成信息交互，局部刷新需要改變的部分網(wǎng)頁(yè)，而無(wú)需整體刷新網(wǎng)頁(yè)導(dǎo)致資源浪費(fèi)，減少了用戶(hù)等待的時(shí)間，增加了用戶(hù)體驗(yàn)效果。

3 系統(tǒng)的模塊化設(shè)計(jì)與實(shí)現(xiàn)

3.1 獲取人臉識(shí)別圖片

在手機(jī)上通過(guò)攝像頭拍照獲取圖片很容易，只需要使用原生系統(tǒng)拍照，利用瀏覽器調(diào)用文件api即可上傳照片，但是這樣只能人為地上傳，不能滿(mǎn)足實(shí)時(shí)性。其解決的辦法是利用html5的vedio組件，在瀏覽器上調(diào)用手機(jī)攝像頭的api，再通過(guò)canvas畫(huà)布繪制攝像頭捕捉的瞬時(shí)畫(huà)面，達(dá)到拍照獲取照片的效果。Video組件可讓瀏覽器獲取攝像頭畫(huà)面，但僅能顯示攝像頭畫(huà)面，并不能獲取圖片。在事件觸發(fā)情況下通過(guò)canvas繪制照片，就要用到canvas的drawImage（）方法來(lái)實(shí)現(xiàn)。觸發(fā)事件后即可在video上繪制圖像。

3.2 發(fā)送圖片到百度人臉識(shí)別api

在獲取了照片之后立馬發(fā)送到百度api，但百度的api文檔要求圖片必須以base64格式傳輸，因此在發(fā)送照片之前必須要對(duì)圖片進(jìn)行轉(zhuǎn)碼，轉(zhuǎn)碼需要用到canvas對(duì)象的toDataURL（）函數(shù)，發(fā)送圖片利用ajax技術(shù)發(fā)送，按照百度api文檔的說(shuō)明，發(fā)送的地址應(yīng)當(dāng)附帶申請(qǐng)的百度密匙，發(fā)送的內(nèi)容要指明傳輸?shù)臄?shù)據(jù)格式以及請(qǐng)求的參數(shù)，請(qǐng)求的返回人臉識(shí)別的表情（emotion）參數(shù)。當(dāng)正確返回時(shí)，瀏覽器會(huì)得到人的臉部表情如happy，sad，surprise等等。

3.3 請(qǐng)求網(wǎng)易云音樂(lè)api獲取歌單

當(dāng)瀏覽器收到識(shí)別的表情，根據(jù)表情發(fā)送Ajax請(qǐng)求對(duì)應(yīng)的歌單。例如，happy匹配輕松歡樂(lè)的歌單，sad匹配沉重悲傷的歌單等。請(qǐng)求對(duì)應(yīng)歌單的數(shù)據(jù)，當(dāng)瀏覽器成功接受到歌單信息時(shí)，隨機(jī)從歌單中獲取歌曲的id。

3.4 獲取歌曲鏈接

獲取了歌曲的id號(hào)就可以通過(guò)ajax請(qǐng)求歌曲的播放鏈接，通過(guò)Html的audio組件播放音樂(lè)。

4 總結(jié)

參考文獻(xiàn)：

[1]黃永慧，陳程凱.HTML5在移動(dòng)應(yīng)用開(kāi)發(fā)上的應(yīng)用前景[J].計(jì)算機(jī)技術(shù)與發(fā)展，2013（7）：207-210.

[2]鐘迅科.基于HTML5的跨平臺(tái)移動(dòng)Web應(yīng)用與混合型應(yīng)用的研究[J].現(xiàn)代計(jì)算機(jī)（專(zhuān)業(yè)版），2014（13）.

[3]覃鳳萍.基于HTML5+jQuery Mobile 的移動(dòng)Web 應(yīng)用開(kāi)發(fā)研究[J].大眾科技，2015，15（7）：9-10.