廣播音樂(lè)庫(kù)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

上海廣播電視臺(tái)技術(shù)運(yùn)營(yíng)中心 陸 彥

一、引言

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

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

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

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

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

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

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

三、基于Puppeteer的音樂(lè)信息采集

音樂(lè)信息主要涵蓋：專輯、曲名、歌手、專輯封面圖、歌詞、歌曲鏈接。打開(kāi)各音樂(lè)平臺(tái)站點(diǎn)收聽(tīng)音樂(lè)，我們能夠看到這些元數(shù)據(jù)，能夠聽(tīng)到美妙的音樂(lè)。但是查看歌曲頁(yè)面的HTML源代碼，卻發(fā)現(xiàn)這些信息完全不在HTML標(biāo)簽中。這是由于音樂(lè)站點(diǎn)的頁(yè)面均在打開(kāi)后，采用了javascript代碼再動(dòng)態(tài)加載這些信息到iframe中呈現(xiàn)。其中歌曲鏈接又被封裝在頁(yè)面的播放器中，需要監(jiān)控播放頁(yè)面向服務(wù)器發(fā)起的類型為Media的請(qǐng)求，才能捕捉到。

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

采用Node運(yùn)行圖2中的javascript代碼，可獲得對(duì)應(yīng)的音樂(lè)頁(yè)面上的相關(guān)信息。

圖2音樂(lè)信息采集的核心代碼示例

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

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

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

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

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

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

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

圖3 ElasticSearch檢索歌曲返回結(jié)果

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

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

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

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

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

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

通過(guò)Vue的官方路由器組件Vue-Router，選曲應(yīng)用實(shí)現(xiàn)了在單個(gè)頁(yè)面中完成主要功能模塊的跳轉(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開(kāi)發(fā)完成的選曲應(yīng)用經(jīng)過(guò)Webpack打包后，生成靜態(tài)的頁(yè)面文件。其前端提供了適配移動(dòng)端的用戶體驗(yàn)，后端則通過(guò)ajax與服務(wù)端ElasticSearch的API進(jìn)行數(shù)據(jù)交互。如圖4所示，音樂(lè)編輯通過(guò)歌曲推薦模塊和搜索模塊獲取曲目，審聽(tīng)后按紅心按鈕選擇，進(jìn)入已選曲目列表。

圖4 音樂(lè)庫(kù)選曲應(yīng)用界面

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

六、總結(jié)

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

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