［譚禹舟］

1 前言

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

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

2 線上點歌臺概述

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

3 線上點歌臺設(shè)計方案

3.1 總體架構(gòu)

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

圖1 線上點歌臺總體架構(gòu)示意圖

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

3.2 功能模塊

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

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

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

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

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

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

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

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

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

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

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

（6）第三方音樂平臺：提供音樂搜索及文件下載開放能力。

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

4.1 點歌臺主界面

用戶在領(lǐng)啟公司開發(fā)的學(xué)生平板領(lǐng)啟系統(tǒng)上點擊進入活動頁面入口，WebView 加載文章詳情頁，請求學(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 加載活動頁面，活動頁面觸發(fā)onLoad 事件，開始頁面初始化，請求領(lǐng)啟系統(tǒng)后端檢查登錄態(tài)，領(lǐng)啟系統(tǒng)后端返回用戶信息，如果未登錄或登錄態(tài)失效返回403，活動頁面請求領(lǐng)啟系統(tǒng)后端獲取領(lǐng)啟課表，后端再返回課表數(shù)據(jù)，如果未登錄或登錄態(tài)失效返回403，活動頁面使用localStorage存儲課表數(shù)據(jù)，執(zhí)行intro動畫，最后WebView 進入活動頁面，展示給用戶交互，如圖3 所示。

圖3 用戶進入活動頁面的流程

4.2 音樂提名

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

圖4 用戶點歌交互流程

4.3 提名排行榜

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

圖5 提名排行榜交互流程

4.4 獲取點歌時間段

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

4.5 加載提名榜單

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

圖6 提名歌曲審核頁面

4.6 音樂播放

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

圖7 點歌計劃安排頁面

5 小結(jié)與啟示

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