陸彥

摘要：本文論述了廣播音樂內(nèi)容庫的架構(gòu)設(shè)計(jì)及其業(yè)務(wù)流程的具體實(shí)現(xiàn)。基于對(duì)Puppeteer、ElasticSearch、Vue、Cordova等技術(shù)的整合利用，本文實(shí)現(xiàn)了音樂庫內(nèi)容的聚合、全文檢索以及構(gòu)建一個(gè)全端選歌應(yīng)用，并將歌曲內(nèi)容提供給廣播制作播出系統(tǒng)的全流程。

關(guān)鍵詞：廣播音樂庫 Puppeteer ElasticSearch Vue Cordova

一、 引言

近年來，全國(guó)各級(jí)廣播電臺(tái)都在探索和實(shí)踐廣播融媒體的改革轉(zhuǎn)型之路，紛紛上線了廣播融媒體生產(chǎn)平臺(tái)，以輔助傳統(tǒng)廣播的制播流程。其主要功能涵蓋了對(duì)音視頻圖文內(nèi)容的采編、匯聚和分發(fā)，幫助電臺(tái)的記者、編輯、導(dǎo)播和主持人等角色快捷地制作和播出實(shí)時(shí)性更高、可聽性更強(qiáng)的廣播節(jié)目。目前，廣播融媒體生產(chǎn)平臺(tái)所匯聚的內(nèi)容一般包括互聯(lián)網(wǎng)上的音樂、新華社和各大報(bào)紙發(fā)布的新聞、門戶網(wǎng)站的RSS、授權(quán)給平臺(tái)進(jìn)行聽眾消息采集的微信公眾號(hào)，以及各電臺(tái)采用融媒體生產(chǎn)平臺(tái)制作出的成品融媒體稿件。

其中收錄海量和最新曲目的音樂庫作為廣播制播系統(tǒng)的重要內(nèi)容來源，為直播節(jié)目音樂單的制作提供了便利的搜索和篩選審核功能。

二、 音樂庫系統(tǒng)的架構(gòu)設(shè)計(jì)

廣播音樂庫系統(tǒng)的拓?fù)淙鐖D1所示：

圖1 廣播音樂庫的系統(tǒng)架構(gòu)

廣播音樂庫的目標(biāo)為：專輯曲目齊全、信息搜索高效和選曲審核方便。

整個(gè)音樂庫系統(tǒng)架構(gòu)在公有云端。通過建立音樂信息采集集群，對(duì)常用的音樂站點(diǎn)進(jìn)行曲目信息和歌曲文件的持續(xù)性采集，并將海量數(shù)據(jù)和文件存儲(chǔ)到數(shù)據(jù)庫和分布式存儲(chǔ)中。為了滿足用戶對(duì)于數(shù)據(jù)庫中的百萬級(jí)體量的音樂元數(shù)據(jù)基于多字段的模糊搜索需求，音樂庫系統(tǒng)對(duì)采集下來的信息進(jìn)行實(shí)時(shí)索引，針對(duì)索引進(jìn)行搜索能夠大幅縮減搜索時(shí)間。海量的音樂來自互聯(lián)網(wǎng)，在與臺(tái)內(nèi)廣播制播系統(tǒng)通過內(nèi)容匯聚總線對(duì)接之前，每個(gè)頻率的音樂編輯需要對(duì)滿足播出要求的歌曲進(jìn)行篩選審核，以劃定一個(gè)可播的歌曲范圍。因此音樂庫系統(tǒng)對(duì)用戶提供了一個(gè)覆蓋移動(dòng)和PC端的選曲應(yīng)用，根據(jù)廣播統(tǒng)一用戶管理中，登錄選曲應(yīng)用的音樂編輯所在的頻率進(jìn)行定向的選曲。

三、 基于Puppeteer的音樂信息采集

為了自動(dòng)化地獲取這些信息，需要采用Puppeteer框架提供的能力。Puppeteer是Google官方團(tuán)隊(duì)所開發(fā)維護(hù)的Headless Chrome的封裝庫，它基于Chrome DevTools protocol提供了高度封裝的接口方便開發(fā)人員控制瀏覽器。通過Puppeteer編寫代碼，我們可以在不打開瀏覽器窗口的情況下完成網(wǎng)頁快照的捕捉、頁面預(yù)渲染內(nèi)容的獲取、網(wǎng)頁自動(dòng)化測(cè)試、站點(diǎn)時(shí)間線的跟蹤等。

圖2音樂信息采集的核心代碼示例

在這段音樂信息采集的核心代碼示例中，首先引用了Puppeteer庫，并定義了headless瀏覽器和頁面對(duì)象。通過page對(duì)象跳轉(zhuǎn)到指定的歌曲頁面，等待頁面中名為contentFrame的iframe渲染完畢，獲取曲名和歌手所對(duì)應(yīng)的HTML標(biāo)簽的內(nèi)容。然后攔截了頁面發(fā)起的所有請(qǐng)求，捕獲了其中類型為media的請(qǐng)求的目標(biāo)地址，即歌曲的鏈接。最后將所有采集到的信息打印出來。

基于以上思路，可以通過Puppeteer抓取常見音樂站點(diǎn)上熱門歌手、專輯所對(duì)應(yīng)的歌曲頁面，編寫類似的代碼對(duì)其中信息進(jìn)行捕獲入庫。多個(gè)站點(diǎn)的信息去重和互補(bǔ)后，可以得到較全的音樂信息庫。

四、 基于ElasticSearch的音樂信息實(shí)時(shí)索引和搜索

當(dāng)音樂信息條目積累到百萬級(jí)的時(shí)候，針對(duì)專輯、曲名和歌手多個(gè)字段的模糊搜索所花的時(shí)間將會(huì)嚴(yán)重影響用戶體驗(yàn)。為了高效獲得優(yōu)質(zhì)的搜索結(jié)果，這里采用了基于Apache Lucene的全文搜索引擎ElasticSearch，為音樂庫提供索引和搜索服務(wù)。

在我們將音樂信息采集到數(shù)據(jù)庫后，可編寫腳本，調(diào)用ElasticSearch對(duì)外提供的Restful API，將信息數(shù)據(jù)送入搜索引擎。ElasticSearch會(huì)自動(dòng)實(shí)時(shí)對(duì)進(jìn)入的數(shù)據(jù)進(jìn)行分詞（專輯、曲名和歌手等中文字段）和建立倒排索引，且用戶可立刻通過其搜索API立即檢索到這些數(shù)據(jù)。

使用以下Linux命令，對(duì)ElasticSearch中music索引的song類型進(jìn)行歌手歌名匹配搜索：

curl http：//localhost：9200/music/song/_search？pretty=true -d '{"query"：

{"multi_match"：

{ "query"："王菲 偶遇"，

"type"："most_fields"，

"fields"：["songName"，"artist"] }}}'

該命令對(duì)ElasticSearch發(fā)起多字段匹配搜索（multi_match），目標(biāo)字段是歌曲名和歌手，檢索到的記錄中越多字段匹配關(guān)鍵字得分就越高（most_fields）。這樣就實(shí)現(xiàn)了多關(guān)鍵字的跨字段搜索。得到ElasticSearch返回的搜索結(jié)果示例片段如圖3所示：

ElasticSearch僅耗時(shí)（took）340毫秒就從五百萬記錄中檢索到492條滿足條件的結(jié)果，比從數(shù)據(jù)庫中執(zhí)行相同的搜索耗時(shí)低了近一個(gè)數(shù)量級(jí)。其中評(píng)分（_score）最高的記錄排在結(jié)果數(shù)組（hits）的首位，也正是我們需要的結(jié)果。

五、 基于Vue和Cordova構(gòu)建全端選歌應(yīng)用

音樂信息的采集和搜索服務(wù)的建成，完成了音樂庫的基礎(chǔ)設(shè)施建設(shè)。音樂編輯還需要在海量曲目中篩選出本臺(tái)擁有版權(quán)的、符合播出要求的歌曲，音樂庫才能為電臺(tái)的直播提供能力。

選曲應(yīng)用是音樂庫提供的用戶交互界面。音樂編輯使用本人的廣播統(tǒng)一賬戶登錄選曲應(yīng)用后，應(yīng)用即可獲得其所屬的頻率信息，選歌結(jié)果也將接入到廣播內(nèi)容匯聚總線中該頻率的通道中去。

為了方便音樂編輯隨時(shí)選曲，選曲應(yīng)用的目標(biāo)是一次開發(fā)，多端運(yùn)行。因此在技術(shù)上采用了前端框架Vue構(gòu)建了一個(gè)SPA（單頁Web應(yīng)用），并通過Apache Cordova封裝成移動(dòng)應(yīng)用，同時(shí)適配PC端和iOS、Android端的使用。

選曲應(yīng)用主要由歌曲推薦模塊、搜索模塊、播放模塊和已選曲目模塊等主要模塊組成。每個(gè)模塊在Vue中都由模板、代碼和樣式三個(gè)部分組成，模板是頁面上所包含的內(nèi)容元素，樣式控制它們的顯示和布局，代碼則監(jiān)聽和響應(yīng)頁面上的事件，動(dòng)態(tài)加載數(shù)據(jù)，完成應(yīng)用功能。選曲應(yīng)用的主要功能模塊又由底層抽象出來的基礎(chǔ)模塊組成，如搜索列表、推薦歌曲列表等。

通過Vue的官方路由器組件Vue-Router，選曲應(yīng)用實(shí)現(xiàn)了在單個(gè)頁面中完成主要功能模塊的跳轉(zhuǎn)，其用戶體驗(yàn)接近原生App的效果。利用Vue的另一個(gè)重要組件Vuex，選曲應(yīng)用建立了一個(gè)全應(yīng)用獨(dú)立的狀態(tài)存儲(chǔ)池，存儲(chǔ)了應(yīng)用中需要全局存儲(chǔ)的數(shù)據(jù)，如：播出列表和播出狀態(tài)等，使得數(shù)據(jù)不因模塊間的切換而丟失。

Vue開發(fā)完成的選曲應(yīng)用經(jīng)過Webpack打包后，生成靜態(tài)的頁面文件。其前端提供了適配移動(dòng)端的用戶體驗(yàn)，后端則通過ajax與服務(wù)端ElasticSearch的API進(jìn)行數(shù)據(jù)交互。如圖4所示，音樂編輯通過歌曲推薦模塊和搜索模塊獲取曲目，審聽后按紅心按鈕選擇，進(jìn)入已選曲目列表。

Cordova為SPA應(yīng)用提供了與各大移動(dòng)平臺(tái)進(jìn)行對(duì)接的項(xiàng)目環(huán)境和接口。以iOS平臺(tái)為例，Cordova會(huì)生成一個(gè)包含xcode工程文件的項(xiàng)目，將選曲應(yīng)用打包后的靜態(tài)文件放入這個(gè)項(xiàng)目的www目錄中，即可在xcode環(huán)境中進(jìn)行移動(dòng)端的適配、調(diào)試和打包。

選曲應(yīng)用適配iOS平臺(tái)，完成兩點(diǎn)工作：首先是將原有采用的HTML5 audio標(biāo)簽的播放模式更換為cordova-plugin-media插件進(jìn)行播放，該插件所提供的能力使得選曲應(yīng)用能夠在退出應(yīng)用后，歌曲仍然能夠在后臺(tái)播放。其次是對(duì)iPhone X的適配，需要在選曲應(yīng)用的首頁頭部聲明將使用目標(biāo)設(shè)備的全部高度，將xcode項(xiàng)目的Launch Screen File更改為scannerOverlay，這樣應(yīng)用啟動(dòng)后才能撐滿iPhone X的全部界面。為了適配iPhone X的劉海，對(duì)SPA的頁面頂部要增加一個(gè)樣式，以留出更多空白，確保內(nèi)容不被劉海遮擋。

總結(jié)

廣播音樂庫系統(tǒng)在建設(shè)過程中，充分融合了IT當(dāng)前最新的技術(shù)，采用Puppeteer解決了對(duì)海量及最新音樂曲目的自動(dòng)化采集問題；采用ElasticSearch解決了針對(duì)音樂元數(shù)據(jù)全文檢索性能的問題；采用Vue和Cordova實(shí)現(xiàn)了多端可用的選曲應(yīng)用，解決了對(duì)具有版權(quán)的、內(nèi)容安全的歌曲選擇的問題。

廣播音樂庫系統(tǒng)的全流程貫通和實(shí)現(xiàn)為廣播制播系統(tǒng)豐富了匯聚內(nèi)容的來源，為頻率欄目提供了新鮮熱門的可播內(nèi)容，增強(qiáng)節(jié)目可聽性的同時(shí)又滿足播出安全性的需要。