上海廣播電視臺技術(shù)運營中心 陸 彥

一、引言

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

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

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

廣播音樂庫系統(tǒng)的拓撲如圖1所示：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

六、總結(jié)

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

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