基于Web App技術(shù)的音樂微課移動(dòng)平臺(tái)開發(fā)

武韻

(咸陽師范學(xué)院 藝術(shù)學(xué)院， 陜西 咸陽 712000)

0 引言

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

1 音樂微課平臺(tái)設(shè)計(jì)

1.1 平臺(tái)總體設(shè)計(jì)

作為一種Web App，本平臺(tái)的移動(dòng)客戶端及后臺(tái)管理系統(tǒng)均需通過API接口進(jìn)行訪問。平臺(tái)主要由Web前端、Redis 緩存、Web服務(wù)集群、Nginx負(fù)載均衡以及Mycat+MySQL數(shù)據(jù)庫集群等子系統(tǒng)組成，其整體架構(gòu)如圖1所示。

圖1 音樂微課APP整體架構(gòu)

用戶的資源訪問請(qǐng)求通過Web前端發(fā)送給平臺(tái)服務(wù)器，Nginx逆向代理服務(wù)器將訪問請(qǐng)求分配給Web應(yīng)用服務(wù)集群以避免單臺(tái)服務(wù)器故障引發(fā)的通信中斷，Tomcat一類的應(yīng)用服務(wù)器攜請(qǐng)求訪問平臺(tái)數(shù)據(jù)庫系統(tǒng)，對(duì)相關(guān)的數(shù)據(jù)進(jìn)行提取，通過Web前端界面向用戶進(jìn)行反饋。在大量用戶并發(fā)訪問的情況下，Redis緩存將被平臺(tái)用于減少存儲(chǔ)設(shè)備的IO操作，以降低數(shù)據(jù)庫載荷從而保證系統(tǒng)運(yùn)行的穩(wěn)定性。

1.2 平臺(tái)功能設(shè)計(jì)

(1) 平臺(tái)客戶端功能

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

個(gè)人中心：新用戶在個(gè)人中心進(jìn)行用戶注冊(cè)、登錄密碼設(shè)置和賬號(hào)的注銷與登錄，此外還包括課程鏈接的收藏，以及評(píng)論歷史的記錄等。通過“我的收藏”用戶可以快速進(jìn)入目標(biāo)課程學(xué)習(xí)界面，為用戶省略了查詢、篩選等環(huán)節(jié)。

微課視頻：教學(xué)視頻播放是微課App的核心功能，本平臺(tái)在教學(xué)視頻播放界面集成了字幕、評(píng)論、筆記等功能，使學(xué)生能夠?qū)崟r(shí)跟進(jìn)課程進(jìn)度，針對(duì)重點(diǎn)、難點(diǎn)展開討論，通過課堂筆記對(duì)課程的重點(diǎn)或知識(shí)點(diǎn)進(jìn)行記錄。

(2) 平臺(tái)管理端功能

平臺(tái)管理端用于后臺(tái)程序、教學(xué)資源、用戶信息的管理和維護(hù)。管理端基于xAPI技術(shù)實(shí)現(xiàn)，主要能夠?qū)崿F(xiàn)以下幾項(xiàng)功能。

用戶管理：通過了注冊(cè)認(rèn)證的學(xué)生用戶能夠進(jìn)行教學(xué)視頻的瀏覽和上傳下載，與其他用戶開展交流，系統(tǒng)管理員用戶則負(fù)責(zé)用戶信息以及數(shù)據(jù)資源的管理和維護(hù)，同時(shí)，系統(tǒng)管理員能夠?qū)W(xué)生用戶的權(quán)限進(jìn)行設(shè)置。

微課課程內(nèi)容管理：教學(xué)視頻等多媒體課件是微課平臺(tái)的核心資源，微課課程內(nèi)容管理主要包括對(duì)課程資源進(jìn)行分類保存、標(biāo)簽設(shè)置、具體內(nèi)容合法性審核等。

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

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

第三方資源管理：除系統(tǒng)管理員和用戶導(dǎo)入的教學(xué)資源外，本平臺(tái)還可通過鏈接引入第三方共享的資源，以此豐富教學(xué)資源內(nèi)容。

2 音樂微課平臺(tái)實(shí)現(xiàn)

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

2.1 視頻字幕播放跳轉(zhuǎn)

用戶通過客戶端首頁查詢或選擇進(jìn)入教育資源視頻的播放界面，平臺(tái)基于Ajax技術(shù)向應(yīng)用服務(wù)器發(fā)送提取視頻地址及其字幕的異步請(qǐng)求，經(jīng)過統(tǒng)一的接口發(fā)送該請(qǐng)求到數(shù)據(jù)庫服務(wù)器并接收其返回的數(shù)據(jù)。

在客戶端Handlebars模板引擎中，數(shù)據(jù)庫返回的JSON數(shù)據(jù)被渲染成字幕列表的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}}

經(jīng)過渲染的字幕列表HTML如下。

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

〈li onclick="videojump(19)"〉

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

〈/li〉

〈li onclick="videojump(21)"〉

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

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

function videojump(time) {

videoPlayer.currentTime(time);

videoPlayer.play();

}

2.2 筆記與評(píng)論的添加

App的筆記與評(píng)論功能主要基于Ajax、Handlebars以及HTML+JavaScript頁面腳本技術(shù)實(shí)現(xiàn)。

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

function addNotes(){

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

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

return;}

// 暫停播放

pause();

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

layer.close(index);

……

}, function (data) {

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

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

mc.postAjax({

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

function addComment () {

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

mc.toast("請(qǐng)登錄后進(jìn)行評(píng)論");

return;}// 暫停播放

pause();

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

……

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

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

mc.postAjax({

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

data: {

courseid: "${courseid}",}

2.3 視頻播放界面切換

平臺(tái)視頻播放界面由Tabs組件進(jìn)行切換，用戶在觀看教學(xué)視頻的過程中通過各種Tabs選項(xiàng)卡的切換實(shí)現(xiàn)視頻的跳轉(zhuǎn)以及評(píng)論和筆記的添加。視頻播放界面的字幕、評(píng)論和筆記的樣式以及內(nèi)容填充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"〉評(píng)論〈/div〉

界面初始選項(xiàng)卡及其樣式可以通過options中active Class與tab Index對(duì)應(yīng)值的修改進(jìn)行設(shè)定，確定界面形式及內(nèi)容的JavaScript腳本如下。

$().ready(function(){

var options = {

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

activeClass : "active",

ontabchange : function(tabIndex) {/

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

2.4 學(xué)習(xí)行為記錄

平臺(tái)的學(xué)生學(xué)習(xí)行為記錄基于xAPI技術(shù)實(shí)現(xiàn)，記錄采集于學(xué)生用戶的郵箱地址。按照xAPI標(biāo)準(zhǔn)，行為人Actor包含的屬性為name(學(xué)生姓名)、object Type(微課學(xué)習(xí)記錄)及mbox(學(xué)生郵箱地址)，學(xué)生的學(xué)習(xí)行為記錄描述如下。

"actor":{

"objectType": "Agent",

"name": "Assassin",

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

}

后臺(tái)程序中將id 和 display定義為動(dòng)作Verb的兩個(gè)屬性，其中id來自于ADL規(guī)范中的URL地址，用戶創(chuàng)建筆記的URL節(jié)點(diǎn)用以描述當(dāng)前動(dòng)作，具體過程如下。

"verb":{

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

"display":{

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

}

}

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

{

"actor":{

"objectType":"Agent",

"name":"Assassin",

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

"verb":{

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

"display":{

3 應(yīng)用效果

選取國內(nèi)某高校音樂學(xué)院大三年級(jí)的一個(gè)班級(jí)共29名學(xué)生為系統(tǒng)試運(yùn)行的模擬用戶。所有學(xué)生在使用的手機(jī)、平板電腦上安裝本App，通過平臺(tái)對(duì)其學(xué)習(xí)行為進(jìn)行記錄，基于這些記錄分析學(xué)生的學(xué)習(xí)狀態(tài)，最后以問卷調(diào)查的方式了解學(xué)生對(duì)本平臺(tái)的使用體驗(yàn)。

3.1 行為分析

平臺(tái)的行為分析應(yīng)用測(cè)試重點(diǎn)關(guān)注學(xué)生通過微課進(jìn)行音樂課程學(xué)習(xí)的過程中發(fā)生的行為，目標(biāo)是檢查通過學(xué)習(xí)行為記錄是否能夠了解學(xué)生音樂課程的學(xué)習(xí)過程。學(xué)生在微課學(xué)習(xí)過程中的筆記添加行為統(tǒng)計(jì)結(jié)果,如表1所示。

表1 學(xué)生微課學(xué)習(xí)過程中筆記添加行為記錄

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

在為期一周的平臺(tái)應(yīng)用測(cè)試期間，每天都對(duì)學(xué)生學(xué)習(xí)行為發(fā)生次數(shù)進(jìn)行記錄，記錄結(jié)果如表2所示。

表2 平臺(tái)試運(yùn)行期間學(xué)生學(xué)習(xí)行為發(fā)生次數(shù)記錄

由該表可見，使用本平臺(tái)的第一天筆記添加行為較多，分析原因是學(xué)生對(duì)新平臺(tái)的功能進(jìn)行首次體驗(yàn)所致。在平臺(tái)試運(yùn)行的最后兩天筆記添加行占比升高，可見學(xué)生已經(jīng)習(xí)慣并認(rèn)可了微課的功能，學(xué)習(xí)態(tài)度也有了較大的改善。

3.2 平臺(tái)應(yīng)用問卷調(diào)查

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

4 總結(jié)

為了解決當(dāng)前音樂微課平臺(tái)普遍存在的教學(xué)形式單一、學(xué)生學(xué)習(xí)行為記錄不缺失或不全面以及跨平臺(tái)學(xué)習(xí)記錄不連續(xù)的問題，本文提出并設(shè)計(jì)了一種基于xAPI技術(shù)的音樂微課學(xué)習(xí)App，介紹了平臺(tái)的總體結(jié)構(gòu)及功能設(shè)計(jì)目標(biāo)，闡述了平臺(tái)的開發(fā)方式和核心功能的實(shí)現(xiàn)過程，通過平臺(tái)的試運(yùn)行驗(yàn)證了平臺(tái)功能的完整性、實(shí)用性以及學(xué)生用戶對(duì)平臺(tái)的綜合評(píng)價(jià)。平臺(tái)的應(yīng)用結(jié)果表明，引入了xAPI技術(shù)標(biāo)準(zhǔn)的微課平臺(tái)能夠完整記錄學(xué)生在微課學(xué)習(xí)過程中的學(xué)習(xí)行為，通過分析結(jié)果能夠幫助教師從學(xué)習(xí)興趣、課堂注意力、互動(dòng)參與率等多個(gè)角度進(jìn)行微課教學(xué)方式的改進(jìn)，從而全面提升音樂課程的教學(xué)效果。