广播音乐库系统的设计与实现

上海广播电视台技术运营中心 陆 彦

一、引言

近年来，全国各级广播电台都在探索和实践广播融媒体的改革转型之路，纷纷上线了广播融媒体生产平台，以辅助传统广播的制播流程。其主要功能涵盖了对音视频图文内容的采编、汇聚和分发，帮助电台的记者、编辑、导播和主持人等角色快捷地制作和播出实时性更高、可听性更强的广播节目。目前，广播融媒体生产平台所汇聚的内容一般包括互联网上的音乐、新华社和各大报纸发布的新闻、门户网站的RSS、授权给平台进行听众消息采集的微信公众号，以及各电台采用融媒体生产平台制作出的成品融媒体稿件。

其中收录海量和最新曲目的音乐库作为广播制播系统的重要内容来源，为直播节目音乐单的制作提供了便利的搜索和筛选审核功能。

二、音乐库系统的架构设计

广播音乐库系统的拓扑如图1所示：

图1 广播音乐库的系统架构

广播音乐库的目标为：专辑曲目齐全、信息搜索高效和选曲审核方便。

整个音乐库系统架构在公有云端。通过建立音乐信息采集集群，对常用的音乐站点进行曲目信息和歌曲文件的持续性采集，并将海量数据和文件存储到数据库和分布式存储中。为了满足用户对于数据库中的百万级体量的音乐元数据基于多字段的模糊搜索需求，音乐库系统对采集下来的信息进行实时索引，针对索引进行搜索能够大幅缩减搜索时间。海量的音乐来自互联网，在与台内广播制播系统通过内容汇聚总线对接之前，每个频率的音乐编辑需要对满足播出要求的歌曲进行筛选审核，以划定一个可播的歌曲范围。因此音乐库系统对用户提供了一个覆盖移动和PC端的选曲应用，根据广播统一用户管理中，登录选曲应用的音乐编辑所在的频率进行定向的选曲。

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

音乐信息主要涵盖：专辑、曲名、歌手、专辑封面图、歌词、歌曲链接。打开各音乐平台站点收听音乐，我们能够看到这些元数据，能够听到美妙的音乐。但是查看歌曲页面的HTML源代码，却发现这些信息完全不在HTML标签中。这是由于音乐站点的页面均在打开后，采用了javascript代码再动态加载这些信息到iframe中呈现。其中歌曲链接又被封装在页面的播放器中，需要监控播放页面向服务器发起的类型为Media的请求，才能捕捉到。

为了自动化地获取这些信息，需要采用Puppeteer框架提供的能力。Puppeteer是Google官方团队所开发维护的Headless Chrome的封装库，它基于Chrome DevTools protocol提供了高度封装的接口方便开发人员控制浏览器。通过Puppeteer编写代码，我们可以在不打开浏览器窗口的情况下完成网页快照的捕捉、页面预渲染内容的获取、网页自动化测试、站点时间线的跟踪等。

采用Node运行图2中的javascript代码，可获得对应的音乐页面上的相关信息。

图2音乐信息采集的核心代码示例

在这段音乐信息采集的核心代码示例中，首先引用了Puppeteer库，并定义了headless浏览器和页面对象。通过page对象跳转到指定的歌曲页面，等待页面中名为contentFrame的iframe渲染完毕，获取曲名和歌手所对应的HTML标签的内容。然后拦截了页面发起的所有请求，捕获了其中类型为media的请求的目标地址，即歌曲的链接。最后将所有采集到的信息打印出来。

基于以上思路，可以通过Puppeteer抓取常见音乐站点上热门歌手、专辑所对应的歌曲页面，编写类似的代码对其中信息进行捕获入库。多个站点的信息去重和互补后，可以得到较全的音乐信息库。

四、基于ElasticSearch的音乐信息实时索引和搜索

当音乐信息条目积累到百万级的时候，针对专辑、曲名和歌手多个字段的模糊搜索所花的时间将会严重影响用户体验。为了高效获得优质的搜索结果，这里采用了基于Apache Lucene的全文搜索引擎ElasticSearch，为音乐库提供索引和搜索服务。

在我们将音乐信息采集到数据库后，可编写脚本，调用ElasticSearch对外提供的Restful API，将信息数据送入搜索引擎。ElasticSearch会自动实时对进入的数据进行分词(专辑、曲名和歌手等中文字段)和建立倒排索引，且用户可立刻通过其搜索API立即检索到这些数据。

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

该命令对ElasticSearch发起多字段匹配搜索(multi_match)，目标字段是歌曲名和歌手，检索到的记录中越多字段匹配关键字得分就越高(most_fields)。这样就实现了多关键字的跨字段搜索。得到ElasticSearch返回的搜索结果示例片段如图3所示：

图3 ElasticSearch检索歌曲返回结果

ElasticSearch仅耗时(took)340毫秒就从五百万记录中检索到492条满足条件的结果，比从数据库中执行相同的搜索耗时低了近一个数量级。其中评分(_score)最高的记录排在结果数组(hits)的首位，也正是我们需要的结果。

五、基于Vue和Cordova构建全端选歌应用

音乐信息的采集和搜索服务的建成，完成了音乐库的基础设施建设。音乐编辑还需要在海量曲目中筛选出本台拥有版权的、符合播出要求的歌曲，音乐库才能为电台的直播提供能力。

选曲应用是音乐库提供的用户交互界面。音乐编辑使用本人的广播统一账户登录选曲应用后，应用即可获得其所属的频率信息，选歌结果也将接入到广播内容汇聚总线中该频率的通道中去。

为了方便音乐编辑随时选曲，选曲应用的目标是一次开发，多端运行。因此在技术上采用了前端框架Vue构建了一个SPA(单页Web应用)，并通过Apache Cordova封装成移动应用，同时适配PC端和iOS、Android端的使用。

选曲应用主要由歌曲推荐模块、搜索模块、播放模块和已选曲目模块等主要模块组成。每个模块在Vue中都由模板、代码和样式三个部分组成，模板是页面上所包含的内容元素，样式控制它们的显示和布局，代码则监听和响应页面上的事件，动态加载数据，完成应用功能。选曲应用的主要功能模块又由底层抽象出来的基础模块组成，如搜索列表、推荐歌曲列表等。

通过Vue的官方路由器组件Vue-Router，选曲应用实现了在单个页面中完成主要功能模块的跳转，其用户体验接近原生App的效果。利用Vue的另一个重要组件Vuex，选曲应用建立了一个全应用独立的状态存储池，存储了应用中需要全局存储的数据，如：播出列表和播出状态等，使得数据不因模块间的切换而丢失。

Vue开发完成的选曲应用经过Webpack打包后，生成静态的页面文件。其前端提供了适配移动端的用户体验，后端则通过ajax与服务端ElasticSearch的API进行数据交互。如图4所示，音乐编辑通过歌曲推荐模块和搜索模块获取曲目，审听后按红心按钮选择，进入已选曲目列表。

图4 音乐库选曲应用界面

Cordova为SPA应用提供了与各大移动平台进行对接的项目环境和接口。以iOS平台为例，Cordova会生成一个包含xcode工程文件的项目，将选曲应用打包后的静态文件放入这个项目的www目录中，即可在xcode环境中进行移动端的适配、调试和打包。

选曲应用适配iOS平台，完成两点工作：首先是将原有采用的HTML5 audio标签的播放模式更换为cordovaplugin-media插件进行播放，该插件所提供的能力使得选曲应用能够在退出应用后，歌曲仍然能够在后台播放。其次是对iPhone X的适配，需要在选曲应用的首页头部声明将使用目标设备的全部高度，将xcode项目的Launch Screen File更改为scannerOverlay，这样应用启动后才能撑满iPhone X的全部界面。为了适配iPhone X的刘海，对SPA的页面顶部要增加一个样式，以留出更多空白，确保内容不被刘海遮挡。

六、总结

广播音乐库系统在建设过程中，充分融合了IT当前最新的技术，采用Puppeteer解决了对海量及最新音乐曲目的自动化采集问题；采用ElasticSearch解决了针对音乐元数据全文检索性能的问题；采用Vue和Cordova实现了多端可用的选曲应用，解决了对具有版权的、内容安全的歌曲选择的问题。

广播音乐库系统的全流程贯通和实现为广播制播系统丰富了汇聚内容的来源，为频率栏目提供了新鲜热门的可播内容，增强节目可听性的同时又满足播出安全性的需要。