廣播音樂庫系統(tǒng)的設計與實現(xiàn)

陸彥

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

關鍵詞：廣播音樂庫 Puppeteer ElasticSearch Vue Cordova

一、 引言

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

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

二、 音樂庫系統(tǒng)的架構設計

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{"multi_match"：

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

"type"："most_fields"，

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

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

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

五、 基于Vue和Cordova構建全端選歌應用

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

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

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

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

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

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

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

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

總結

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

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