基于Web App技術的音樂微課移動平臺開發

武韻

(咸陽師范學院 藝術學院， 陜西 咸陽 712000)

0 引言

隨著教育信息化改革的持續推進，網絡教學在教育領域扮演著越來越重要的角色，在移動終端設備高度智能化的條件下，App類網絡教學平臺逐漸興起[1-2]。微課的出現滿足了學生移動學習和知識點單獨學習的需求，豐富了個性化教育的實施方式[3-4]。目前音樂教學微課平臺正在得以推廣，但這些微課平臺只是簡單地將教育資源進行集中，教學形式單一且枯燥，同時忽略了學生學習行為記錄的重要性，不同微課平臺之間的學習記錄內容不互通共享，使音樂微課教學的作用沒有得到充分發揮[5]。為了解決這些問題，本文提出并設計了一種音樂微課移動平臺，利用Web App技術為平臺創建了統一的PC端和移動端界面，引入了xAPI標準實現了跨平臺學習行為記錄的保存和銜接。

1 音樂微課平臺設計

1.1 平臺總體設計

作為一種Web App，本平臺的移動客戶端及后臺管理系統均需通過API接口進行訪問。平臺主要由Web前端、Redis 緩存、Web服務集群、Nginx負載均衡以及Mycat+MySQL數據庫集群等子系統組成，其整體架構如圖1所示。

圖1 音樂微課APP整體架構

用戶的資源訪問請求通過Web前端發送給平臺服務器，Nginx逆向代理服務器將訪問請求分配給Web應用服務集群以避免單臺服務器故障引發的通信中斷，Tomcat一類的應用服務器攜請求訪問平臺數據庫系統，對相關的數據進行提取，通過Web前端界面向用戶進行反饋。在大量用戶并發訪問的情況下，Redis緩存將被平臺用于減少存儲設備的IO操作，以降低數據庫載荷從而保證系統運行的穩定性。

1.2 平臺功能設計

(1) 平臺客戶端功能

微課主頁：客戶端主頁以輪播圖的方式進行音樂課程教學內容類型和題目的展示，包括分類課程、熱門課程、名師課程等，作為微課App的基本功能，使用輪播圖進行內容展示能夠吸引學生的注意力，提高用戶的訪問簡捷性，尤其新內容的添加提示能夠使用戶及時地對平臺動態進行了解。

個人中心：新用戶在個人中心進行用戶注冊、登錄密碼設置和賬號的注銷與登錄，此外還包括課程鏈接的收藏，以及評論歷史的記錄等。通過“我的收藏”用戶可以快速進入目標課程學習界面，為用戶省略了查詢、篩選等環節。

微課視頻：教學視頻播放是微課App的核心功能，本平臺在教學視頻播放界面集成了字幕、評論、筆記等功能，使學生能夠實時跟進課程進度，針對重點、難點展開討論，通過課堂筆記對課程的重點或知識點進行記錄。

(2) 平臺管理端功能

平臺管理端用于后臺程序、教學資源、用戶信息的管理和維護。管理端基于xAPI技術實現，主要能夠實現以下幾項功能。

用戶管理：通過了注冊認證的學生用戶能夠進行教學視頻的瀏覽和上傳下載，與其他用戶開展交流，系統管理員用戶則負責用戶信息以及數據資源的管理和維護，同時，系統管理員能夠對學生用戶的權限進行設置。

微課課程內容管理：教學視頻等多媒體課件是微課平臺的核心資源，微課課程內容管理主要包括對課程資源進行分類保存、標簽設置、具體內容合法性審核等。

類別管理：微課資源可根據作者、上傳者、上傳時間、課件類型(PPT、視頻等)進行分類，分類管理則是根據資源的更新進行類別的新建或刪除以及編輯、合并等。

標簽管理：標簽管理通過課程資源標簽的多樣化設置為用戶提供資源的快速查詢途徑，以便捷的搜索流程提升用戶的使用體驗。

第三方資源管理：除系統管理員和用戶導入的教學資源外，本平臺還可通過鏈接引入第三方共享的資源，以此豐富教學資源內容。

2 音樂微課平臺實現

本平臺利用Eclpise 開發工具在Spring開源框架下基于Java語言進行程序開發，分別采用MySQL和Tomcat作為平臺的資源存儲數據庫和Web應用服務器數據庫，使用Redis作為處理大量用戶并發訪問需求的二級緩存，通過Helix Mobile Server流媒體服務器進行教學視頻的播放。平臺客戶端基于CSS3、HTML5為移動終端Web提供支撐，基于Aamazui框架與jsp+freemarker技術進行瀏覽器界面的開發。

2.1 視頻字幕播放跳轉

用戶通過客戶端首頁查詢或選擇進入教育資源視頻的播放界面，平臺基于Ajax技術向應用服務器發送提取視頻地址及其字幕的異步請求，經過統一的接口發送該請求到數據庫服務器并接收其返回的數據。

在客戶端Handlebars模板引擎中，數據庫返回的JSON數據被渲染成字幕列表的HTML字段。

其中，原始字幕列表HTML如下。

〈script id="vtt-tpl" type="text/x-handlebars-template"〉

{{#each this}}

〈li onclick="videojump({{vtt_totaltime}})"〉

{{#if vtt_time}} 〈font

color="#0e90d2"〉[{{vtt_time}}]〈/font〉 {{vtt_text}}

經過渲染的字幕列表HTML如下。

〈ul id="vtt" class="am-list am-list-static"〉

〈li onclick="videojump(19)"〉

〈font color="#0e90d2"〉[00:00:19]〈/font〉 親愛的同學 你好

〈/li〉

〈li onclick="videojump(21)"〉

〈font color="#0e90d2"〉[00:00:21]〈/font〉 歡迎你來到

將以上HTML字段添加至Tabs選項卡下的字幕內容中，字幕列表在渲染的過程中每一條字幕都被添加了videojump(time)事件，用戶選擇字幕段時平臺后臺調用JS函數按照time的限定將視頻的播放時間段跳轉至限定范圍內，滿足事件的JavaScript腳本函數如下。

function videojump(time) {

videoPlayer.currentTime(time);

videoPlayer.play();

}

2.2 筆記與評論的添加

App的筆記與評論功能主要基于Ajax、Handlebars以及HTML+JavaScript頁面腳本技術實現。

只有通過平臺注冊認證的用戶才能使用平臺的筆記添加功能，用戶通過Prompt窗口完成筆記輸入和添加后，平臺基于Ajax技術更新用戶的筆記列表并利用Handlebars模板技術進行列表的渲染。筆記的添加過程如下。

function addNotes(){

if("${activeuser.id)" == ""){

mc.toast("請登錄后再添加");

return;}

// 暫停播放

pause();

mc.promptText("填寫筆記",function (text, index) {

layer.close(index);

……

}, function (data) {

if (data && data.code == 1) {

mc.toast("添加筆記成功!");

mc.postAjax({

無論用戶是否成功登錄都可以瀏覽用戶評論的內容。評論的添加與筆記添加過程相近，具體步驟如下。

function addComment () {

if ("${activeuser.ed}" == "") {

mc.toast("請登錄后進行評論");

return;}// 暫停播放

pause();

mc.promptText("填寫評論", function (text, index) {

……

if {data && data.code == 1) {

mc.toast("評論成功!");

mc.postAjax({

url: "${ctx}/app/course/getComment",

data: {

courseid: "${courseid}",}

2.3 視頻播放界面切換

平臺視頻播放界面由Tabs組件進行切換，用戶在觀看教學視頻的過程中通過各種Tabs選項卡的切換實現視頻的跳轉以及評論和筆記的添加。視頻播放界面的字幕、評論和筆記的樣式以及內容填充HTML字段如下。

〈%--mctabs--%〉

〈div id="mctabs"〉

〈div class="uh-tabs uh-row"〉

〈div class="uh-tab uh-col-4" data-swiper-id="tab_subtitles"〉字幕〈/div〉

〈div class="uh-tab uh-col-4" data-swiper-id="tab_notes"〉筆記〈/div〉

〈div class="uh-tab uh-col-4" data-swiper-id="tab_comment"〉評論〈/div〉

界面初始選項卡及其樣式可以通過options中active Class與tab Index對應值的修改進行設定，確定界面形式及內容的JavaScript腳本如下。

$().ready(function(){

var options = {

tabIndex : 0,//初始化的tab索引

activeClass : "active",

ontabchange : function(tabIndex) {/

/切換tab的事件，tabIndex要切換的tabindex的索引

2.4 學習行為記錄

平臺的學生學習行為記錄基于xAPI技術實現，記錄采集于學生用戶的郵箱地址。按照xAPI標準，行為人Actor包含的屬性為name(學生姓名)、object Type(微課學習記錄)及mbox(學生郵箱地址)，學生的學習行為記錄描述如下。

"actor":{

"objectType": "Agent",

"name": "Assassin",

"mbax": "moilto:Assassin@mcourse.cc"

}

后臺程序中將id 和 display定義為動作Verb的兩個屬性，其中id來自于ADL規范中的URL地址，用戶創建筆記的URL節點用以描述當前動作，具體過程如下。

"verb":{

"id": "https://w3id.org/xopi/adb/verbs/noted,

"display":{

"zh-cn":"添加筆記"

}

}

按照用戶的筆記添加特征，操作對象object的屬性主要包括：object Type (記錄筆記的活動)、id (視頻地址)、definition.name (視頻名稱)、definition.description (視頻內容描述)、definition.type (記錄影片的活動)和 extensions (記錄影片的時長)。設定Result為筆記添加結果，其所包含的屬性分別為response(筆記的內容)、duration(筆記填寫時長) 和 extensions(視頻播放位置)，同時設定context包含微課教師、上傳者、平臺網址、視頻信息等屬性。設定timestamp為記錄時間。則xAPI標準下的筆記添加行為記錄的描述如下。

{

"actor":{

"objectType":"Agent",

"name":"Assassin",

"mbox":"mailto:Assossin@mcourse.cc"},

"verb":{

"id":"https://w3id.org/xapi/adb/verbs/noted",

"display":{

3 應用效果

選取國內某高校音樂學院大三年級的一個班級共29名學生為系統試運行的模擬用戶。所有學生在使用的手機、平板電腦上安裝本App，通過平臺對其學習行為進行記錄，基于這些記錄分析學生的學習狀態，最后以問卷調查的方式了解學生對本平臺的使用體驗。

3.1 行為分析

平臺的行為分析應用測試重點關注學生通過微課進行音樂課程學習的過程中發生的行為，目標是檢查通過學習行為記錄是否能夠了解學生音樂課程的學習過程。學生在微課學習過程中的筆記添加行為統計結果,如表1所示。

表1 學生微課學習過程中筆記添加行為記錄

29名學生中有20名在進行微課學習時添加了筆記，筆記記錄共24條，其中進行到專題1內容時添加筆記4條，進行到專題2內容時添加筆記11條，進行到專題3內容時添加筆記12條，可見學生普遍對專題2和3的教學內容更感興趣。此外，學生記筆記的時長均大于課程時長，說明微課教學的方式對于提升學生的學習興趣和注意力具有較大作用。

在為期一周的平臺應用測試期間，每天都對學生學習行為發生次數進行記錄，記錄結果如表2所示。

表2 平臺試運行期間學生學習行為發生次數記錄

由該表可見，使用本平臺的第一天筆記添加行為較多，分析原因是學生對新平臺的功能進行首次體驗所致。在平臺試運行的最后兩天筆記添加行占比升高，可見學生已經習慣并認可了微課的功能，學習態度也有了較大的改善。

3.2 平臺應用問卷調查

問卷調查是直接獲取用戶使用體驗的最佳方式。本文所設計的調查問卷共列出了14個有關平臺使用體驗的問題，29名參與平臺試運行的學生從“非常同意”“同意”“不確定”“不同意”“非常不同意”5個感知選項中選擇最符合自身體驗感覺的一項。調查統計結果顯示，平臺訪問方便、操作簡單、導航清晰且易于理解每一個步驟和平臺界面布局合理4項使用體驗的綜合滿意度最高，可見平臺基本滿足了界面清晰、訪問便捷的功能需求。對于互動性、視頻界面功能切換、筆記功能和字幕跳轉4項使用體驗，選擇滿意及以上的用戶較多，可見本平臺的學習服務功能比較貼近用戶的實際需求。

4 總結

為了解決當前音樂微課平臺普遍存在的教學形式單一、學生學習行為記錄不缺失或不全面以及跨平臺學習記錄不連續的問題，本文提出并設計了一種基于xAPI技術的音樂微課學習App，介紹了平臺的總體結構及功能設計目標，闡述了平臺的開發方式和核心功能的實現過程，通過平臺的試運行驗證了平臺功能的完整性、實用性以及學生用戶對平臺的綜合評價。平臺的應用結果表明，引入了xAPI技術標準的微課平臺能夠完整記錄學生在微課學習過程中的學習行為，通過分析結果能夠幫助教師從學習興趣、課堂注意力、互動參與率等多個角度進行微課教學方式的改進，從而全面提升音樂課程的教學效果。