［譚禹舟］

1 前言

校園廣播是每所學(xué)校不可缺少的基礎(chǔ)設(shè)施之一，通常由學(xué)校職工或?qū)W生廣播站負(fù)責(zé)管理和運(yùn)營(yíng)，做為學(xué)校師生獲取信息和通知的重要渠道，主要用于多種活動(dòng)，如播報(bào)新聞、發(fā)布通知、升國(guó)旗、課間操等；同時(shí)，校園廣播還可以播放音樂(lè)、廣播節(jié)目等，為學(xué)生們提供學(xué)習(xí)之余的娛樂(lè)和休閑。

目前傳統(tǒng)的校園廣播系統(tǒng)通常由管理人員手動(dòng)操控廣播系統(tǒng)的方式播放固定的音樂(lè)，操作繁瑣，容易出現(xiàn)誤時(shí)誤點(diǎn)的播放。本文以廣州外國(guó)語(yǔ)學(xué)校廣播系統(tǒng)為開發(fā)對(duì)象，基于原生的HTML+CSS+JS，將安裝學(xué)生平板或電腦上的數(shù)字化教學(xué)系統(tǒng)、校園廣播系統(tǒng)以及互聯(lián)網(wǎng)的第三方音樂(lè)平臺(tái)集成，搭建用戶互動(dòng)的線上點(diǎn)歌臺(tái)，使得同學(xué)們通過(guò)學(xué)習(xí)平板、電腦等設(shè)備進(jìn)行熱門歌曲搜索和歌曲提名，點(diǎn)歌臺(tái)根據(jù)歌曲提名排行榜的情況定時(shí)通過(guò)校園廣播系統(tǒng)播放歌曲，一方面減少了廣播系統(tǒng)的日常人工介入的操作運(yùn)維，同時(shí)使點(diǎn)歌管理系統(tǒng)化、自動(dòng)化和互動(dòng)化，也使同學(xué)們緊張學(xué)習(xí)之余的娛樂(lè)活動(dòng)變得更加豐富多彩。

2 線上點(diǎn)歌臺(tái)概述

通常校園廣播臺(tái)播放是由學(xué)校廣播站管理人員選擇具體內(nèi)容播放，通過(guò)人工控制音樂(lè)或歌曲的播放次序和時(shí)間，播放內(nèi)容相對(duì)固定和有限，而本方案中線上點(diǎn)歌臺(tái)通過(guò)使用RESTful API 技術(shù)，實(shí)現(xiàn)了學(xué)生使用在學(xué)校數(shù)字化教學(xué)系統(tǒng)終端上開發(fā)的前端應(yīng)用，連接互聯(lián)網(wǎng)第三方音樂(lè)平臺(tái)，挑選感興趣或者熱門的歌曲進(jìn)行試聽和點(diǎn)歌提名。線上點(diǎn)歌臺(tái)通過(guò)對(duì)提名的音樂(lè)和歌曲建立排行榜，對(duì)排行榜中的音樂(lè)和歌曲按點(diǎn)歌量等算法選擇排序，在預(yù)設(shè)規(guī)定的時(shí)間段內(nèi)自動(dòng)通過(guò)校園廣播系統(tǒng)進(jìn)行播放，滿足學(xué)生對(duì)歌曲選擇多樣化和互動(dòng)化的需求。

3 線上點(diǎn)歌臺(tái)設(shè)計(jì)方案

3.1 總體架構(gòu)

點(diǎn)歌臺(tái)總共由六部分組成，包括線上點(diǎn)歌網(wǎng)頁(yè)前端，線上點(diǎn)歌數(shù)據(jù)中心，學(xué)校數(shù)字化教學(xué)系統(tǒng)，校園廣播控制臺(tái)，校園廣播服務(wù)器以及第三方音樂(lè)平臺(tái)，如圖1 所示。

圖1 線上點(diǎn)歌臺(tái)總體架構(gòu)示意圖

線上點(diǎn)歌網(wǎng)頁(yè)前端主要實(shí)現(xiàn)面向?qū)W生及管理人員的服務(wù)開放；線上點(diǎn)歌數(shù)據(jù)中心主要向點(diǎn)歌前端及控制臺(tái)提供數(shù)據(jù)庫(kù)服務(wù)；學(xué)校數(shù)字化教學(xué)系統(tǒng)主要實(shí)現(xiàn)為點(diǎn)歌網(wǎng)頁(yè)開通入口，提供學(xué)生用戶信息開放能力；校園廣播控制臺(tái)主要實(shí)現(xiàn)動(dòng)態(tài)配置更新及并定時(shí)控制能力；校園廣播服務(wù)器主要提供音頻播放能力；第三方音樂(lè)平臺(tái)主要提供音樂(lè)搜索及文件下載能力。

3.2 功能模塊

（1）線上點(diǎn)歌網(wǎng)頁(yè)前端：采用HTML5 技術(shù)，主要包括供學(xué)生使用的點(diǎn)歌活動(dòng)頁(yè)面和供校園廣播系統(tǒng)管理人員使用的管理頁(yè)面。點(diǎn)歌活動(dòng)頁(yè)面分為三大板塊，分別為音樂(lè)提名板塊、提名排行榜板塊和歷史提名板塊。管理頁(yè)面分為三大板塊，分別為廣播任務(wù)管理板塊、點(diǎn)歌排期管理板塊和點(diǎn)歌提名審核板塊，如圖2 所示。

圖2 線上點(diǎn)歌網(wǎng)頁(yè)前端內(nèi)容

用戶交互活動(dòng)頁(yè)面是通過(guò)iframe嵌入至學(xué)校數(shù)字化教學(xué)系統(tǒng)內(nèi)，使用純?cè)鶫TML+CSS+JS 搭建網(wǎng)頁(yè)，通過(guò)XMLHTTPREQUEST 實(shí)現(xiàn)RESTful API 接口。

（2）線上點(diǎn)歌數(shù)據(jù)中心：數(shù)據(jù)中心部署在阿里云服務(wù)器上，主要包括網(wǎng)頁(yè)后端、控制臺(tái)配置管理、周期性自動(dòng)化排行榜結(jié)果排期。使用WAMP（Windows+Apache+MySQL+PHP）?？刂婆_(tái)配置管理負(fù)責(zé)通知校園控制臺(tái)當(dāng)天的播放內(nèi)容、音頻文件數(shù)據(jù)。

（3）學(xué)校數(shù)字化教學(xué)系統(tǒng)：裝載在學(xué)生平板電腦上的學(xué)校數(shù)字化教學(xué)系統(tǒng)，通過(guò)WebView 向?qū)W生提供點(diǎn)歌頁(yè)面入口，使學(xué)生能夠在學(xué)習(xí)平板電腦上訪問(wèn)線上點(diǎn)歌網(wǎng)頁(yè)，并通過(guò)JSBridge 打通網(wǎng)頁(yè)前端獲取學(xué)生信息的接口。

（4）校園廣播后臺(tái)：主要實(shí)現(xiàn)動(dòng)態(tài)從線上點(diǎn)歌數(shù)據(jù)中心獲取當(dāng)天廣播任務(wù)，并通過(guò)學(xué)校廣播系統(tǒng)服務(wù)開放能力，定時(shí)控制學(xué)校廣播服務(wù)器播放音頻文件。

廣播控制：由于因歷史原因校內(nèi)共設(shè)有兩套廣播控制系統(tǒng)，一套負(fù)責(zé)校園一期工程建筑內(nèi)的舊廣播終端，另一套負(fù)責(zé)二期工程建筑內(nèi)的新廣播終端，需采用不同技術(shù)對(duì)接后再實(shí)現(xiàn)對(duì)兩套系統(tǒng)的同步控制。

根據(jù)調(diào)研，一期工程的廣播系統(tǒng)提供一套基于Java的廣播控制程序，在使用JADX 對(duì)其jar 軟件包進(jìn)行逆向工程分析后，得知其使用java.io.net 和序列化傳輸實(shí)現(xiàn)TCP 控制協(xié)議和UDP 音頻流式傳輸協(xié)議，故依照其代碼重寫一個(gè)支持命令行執(zhí)行播放控制的Java程序，以備后期調(diào)用。

二期工程的廣播系統(tǒng)并未提供客戶端，而是轉(zhuǎn)而使用網(wǎng)頁(yè)端進(jìn)行控制，在使用Fiddler 抓取到后端RESTful API接口后，使用Python 的requests 庫(kù)重新封裝，同時(shí)編寫一個(gè)支持命令行執(zhí)行上傳音頻文件、播放控制的Python 程序。

通過(guò)Python 實(shí)現(xiàn)配置更新獲取，同時(shí)調(diào)用ffmpeg 對(duì)音頻文件進(jìn)行碼率壓縮、響度均衡處理；使用Windows 任務(wù)計(jì)劃及批處理實(shí)現(xiàn)定時(shí)執(zhí)行廣播任務(wù)。

（5）校園廣播服務(wù)器：主要提供音頻播放開放能力。

（6）第三方音樂(lè)平臺(tái)：提供音樂(lè)搜索及文件下載開放能力。

4 核心功能技術(shù)實(shí)現(xiàn)方案

4.1 點(diǎn)歌臺(tái)主界面

用戶在領(lǐng)啟公司開發(fā)的學(xué)生平板領(lǐng)啟系統(tǒng)上點(diǎn)擊進(jìn)入活動(dòng)頁(yè)面入口，WebView 加載文章詳情頁(yè)，請(qǐng)求學(xué)生平板從領(lǐng)啟系統(tǒng)的后端獲取文章數(shù)據(jù)，領(lǐng)啟系統(tǒng)后端返回帶有XSS 注入代碼的文章數(shù)據(jù)，領(lǐng)啟系統(tǒng)前端開始渲染文章內(nèi)容并注入JS 代碼生效，清空HTML body 內(nèi)容，插入iFrame 元素，WebView 加載活動(dòng)頁(yè)面，活動(dòng)頁(yè)面觸發(fā)onLoad 事件，開始頁(yè)面初始化，請(qǐng)求領(lǐng)啟系統(tǒng)后端檢查登錄態(tài)，領(lǐng)啟系統(tǒng)后端返回用戶信息，如果未登錄或登錄態(tài)失效返回403，活動(dòng)頁(yè)面請(qǐng)求領(lǐng)啟系統(tǒng)后端獲取領(lǐng)啟課表，后端再返回課表數(shù)據(jù)，如果未登錄或登錄態(tài)失效返回403，活動(dòng)頁(yè)面使用localStorage存儲(chǔ)課表數(shù)據(jù)，執(zhí)行intro動(dòng)畫，最后WebView 進(jìn)入活動(dòng)頁(yè)面，展示給用戶交互，如圖3 所示。

圖3 用戶進(jìn)入活動(dòng)頁(yè)面的流程

4.2 音樂(lè)提名

用戶通過(guò)WebView 點(diǎn)擊“我要提名”卡片進(jìn)入活動(dòng)頁(yè)面，在活動(dòng)頁(yè)面中觸發(fā)click 事件，進(jìn)入提名頁(yè)面。提名頁(yè)面會(huì)觸發(fā)onLoad 事件，進(jìn)行內(nèi)部初始化并獲取點(diǎn)歌時(shí)間段，然后解析任務(wù)列表并插入下拉框，等待用戶選擇。用戶輸入歌曲關(guān)鍵詞搜索后，會(huì)觸發(fā)輸入框input、compositionstart、compositionend事件，系統(tǒng)會(huì)將搜索關(guān)鍵詞和平臺(tái)ID 傳入阿里云后端，請(qǐng)求音樂(lè)平臺(tái)接口，獲取搜索結(jié)果，并格式化數(shù)據(jù)展示在WebView 上。用戶選擇搜索結(jié)果項(xiàng)后，音樂(lè)會(huì)播放。最后，用戶雙重確認(rèn)提交后，系統(tǒng)會(huì)將數(shù)據(jù)PUT 到阿里云后端。阿里云后端會(huì)根據(jù)用戶ID、當(dāng)前周期時(shí)間段、提名狀態(tài)為正在審核或已通過(guò)審核，檢索該用戶提名記錄數(shù)量，并判斷是否超過(guò)當(dāng)前周期可提名次數(shù)。如果沒(méi)有超過(guò)，則會(huì)插入提名數(shù)據(jù)到MySQL 中。返回執(zhí)行結(jié)果后，WebView 會(huì)檢查執(zhí)行結(jié)果，如果成功，則跳回主界面，返回給用戶，如圖4 所示。

圖4 用戶點(diǎn)歌交互流程

4.3 提名排行榜

用戶進(jìn)入WebView，點(diǎn)擊“歌曲榜單”卡片，觸發(fā)click 事件進(jìn)入活動(dòng)頁(yè)面。在活動(dòng)頁(yè)面內(nèi)部初始化，獲取點(diǎn)歌時(shí)間段，解析任務(wù)列表并插入選項(xiàng)卡至頁(yè)面，默認(rèn)選擇第一個(gè)任務(wù)。當(dāng)用戶劃到頁(yè)面最底部時(shí)，觸發(fā)Intersection-Observer加載提名榜單。當(dāng)用戶點(diǎn)擊試聽時(shí)，觸發(fā)click 事件，音樂(lè)播放。用戶點(diǎn)擊投票時(shí)，觸發(fā)click 事件，活動(dòng)頁(yè)面檢查是否已試聽，確認(rèn)操作不可逆。當(dāng)用戶二次確認(rèn)后，活動(dòng)頁(yè)面?zhèn)魅胩崦鸌D，PUT 投票請(qǐng)求，阿里云后端插入投票數(shù)據(jù)至MySQL 并返回執(zhí)行結(jié)果?；顒?dòng)頁(yè)面解析執(zhí)行結(jié)果，并顯示結(jié)果彈窗、更新排行榜，最后WebView 展 示更新后的排行榜給用戶，如圖5所示。

圖5 提名排行榜交互流程

4.4 獲取點(diǎn)歌時(shí)間段

活動(dòng)頁(yè)面向阿里云后端發(fā)送GET 請(qǐng)求，獲取可點(diǎn)歌時(shí)間段。阿里云后端通過(guò)MySQL 檢索所有類型為“點(diǎn)歌”的任務(wù)，并返回檢索結(jié)果給阿里云后端。最后，阿里云后端將支持點(diǎn)歌時(shí)段的任務(wù)ID 返回給活動(dòng)頁(yè)面。

4.5 加載提名榜單

活動(dòng)頁(yè)面向阿里云后端發(fā)送GET 請(qǐng)求，傳入任務(wù)ID和分頁(yè)，獲取排行榜數(shù)據(jù)。阿里云后端使用MySQL 根據(jù)任務(wù)ID 和當(dāng)前周期的開始結(jié)束時(shí)間檢索排行榜數(shù)據(jù)，并返回檢索結(jié)果的最新十條數(shù)據(jù)。阿里云后端將檢索結(jié)果返回給活動(dòng)頁(yè)面，活動(dòng)頁(yè)面使用WebView 解析列表并插入提名卡片，如圖6 所示。

圖6 提名歌曲審核頁(yè)面

4.6 音樂(lè)播放

WebView 調(diào)用loadPlayer 函數(shù)，根據(jù)localStorage 數(shù)據(jù)判斷是否屬于上課時(shí)間，如果是，彈出提示文案，活動(dòng)頁(yè)面向阿里云后端傳入平臺(tái)ID 和音樂(lè)ID 并發(fā)起GET 請(qǐng)求獲取音頻鏈接，阿里云后端向音樂(lè)平臺(tái)接口請(qǐng)求播放鏈接，音樂(lè)平臺(tái)接口返回播放鏈接，阿里云后端格式化數(shù)據(jù)并返回給活動(dòng)頁(yè)面，活動(dòng)頁(yè)面將數(shù)據(jù)傳給WebView，WebView 設(shè)置audio 元素的src 值，開始緩沖音頻，最后播放音樂(lè)，如圖7 所示。

圖7 點(diǎn)歌計(jì)劃安排頁(yè)面

5 小結(jié)與啟示

通過(guò)在學(xué)校內(nèi)教學(xué)系統(tǒng)與互聯(lián)網(wǎng)系統(tǒng)的連通，改變傳統(tǒng)廣播歌曲播放模式，需要將教學(xué)系統(tǒng)、廣播系統(tǒng)、第三方音樂(lè)平臺(tái)集成搭建校園線上點(diǎn)歌臺(tái)。在此基礎(chǔ)上才能實(shí)現(xiàn)用戶在學(xué)校數(shù)字化教學(xué)系統(tǒng)終端上挑選歌曲、點(diǎn)歌提名、展現(xiàn)點(diǎn)歌臺(tái)排行榜和校園廣播定時(shí)播放的互動(dòng)模式，增加了廣播系統(tǒng)播放內(nèi)容的新穎、熱門內(nèi)容，提高同學(xué)們互動(dòng)參與度，也能反映同學(xué)們對(duì)校園生活的熱愛。