李健祥++鄭丹

摘 要： 利用開源跨平臺圖形界面Qt，以及web中的最新開源框架Node.js，我們設(shè)計了一款開源的，可視化的，可以橫跨windows，IOS，Android，windows phone等多平臺的多媒體播放平臺。后臺通過Node..js搭建服務(wù)器，客戶端或瀏覽器可以訪問服務(wù)器，并為用戶提供非結(jié)構(gòu)化數(shù)據(jù)存儲的服務(wù)。數(shù)據(jù)庫為MongoDB。

關(guān)鍵詞：Qt Node.js 多媒體播放 數(shù)據(jù)可視化 跨平臺

中圖分類號：TP3 文獻(xiàn)標(biāo)識碼：A 文章編號：1003-9082（2016）05-0003-02

引言

Node.js是一款為服務(wù)器端web開發(fā)所設(shè)計的開源的，跨平臺運行環(huán)境。雖然Node.js并不是完全由JavaScript開發(fā)的框架，但其中許多基本模塊都是由javaScript編寫而成。支持異步加載，事件驅(qū)動的體系架構(gòu)。

Qt是一款跨平臺的應(yīng)用程序框架，由于其的輕量化以及運行快捷，被廣泛應(yīng)用于硬件平臺開發(fā)領(lǐng)域，同時也可以運行在多個主流平臺。使用Qt編寫圖形界面依賴C++，運行效率高。

隨著我國互聯(lián)網(wǎng)時代的爆發(fā)，PC互聯(lián)網(wǎng)已接近飽和，移動互聯(lián)網(wǎng)發(fā)展速度飛快?！吨袊苿踊ヂ?lián)網(wǎng)行業(yè)市場前瞻與投資戰(zhàn)略規(guī)劃分析報告前瞻》數(shù)據(jù)顯示，截止2013年底，中國手機(jī)網(wǎng)民超過5億，占比達(dá)81%。隨著wifi與移動4G的普及，移動互聯(lián)網(wǎng)網(wǎng)民呈爆發(fā)趨勢。

同時，無論是PC端，移動端，嵌入式平臺，都離不開多媒體播放器。然而在數(shù)據(jù)可視化，跨平臺方面還有很大的提升潛力，Qt與Node.js在圖形界面和web端都是非常強(qiáng)大的開發(fā)環(huán)境與框架。同時，大量的用戶使用也為hadoop， mapreduce， MongoDB等大數(shù)據(jù)處理工具提供了很好的應(yīng)用場景。

一、總體設(shè)計

1.基本功能

多媒體播放器的基本功能：播放，暫停，切換，上傳，分享。這是無論任何播放器必須具備的功能。在此基礎(chǔ)上，本文設(shè)計的播放器增加了：音樂可視化，用戶音樂播放頻率統(tǒng)計等功能。使得播放器的體驗更豐富，同時通過收集web服務(wù)器與數(shù)據(jù)庫中用戶所產(chǎn)生的數(shù)據(jù)，利用大數(shù)據(jù)工具對用戶行為進(jìn)行分析。同時，使用云服務(wù)器，為使用者提供存儲環(huán)境。

1.1整體架構(gòu)

系統(tǒng)分為以下幾個部分：客戶端，web前端，web服務(wù)器，MongoDB數(shù)據(jù)庫，hadoop集群以及HDFS分布式文件系統(tǒng)。

2.整體設(shè)計

2.1 客戶端設(shè)計

客戶端設(shè)計的目的是為了方便經(jīng)常使用PC與移動端App的用戶。與瀏覽器請求服務(wù)器數(shù)據(jù)類似，客戶端可以通過Qt實現(xiàn)界面，再通過向web服務(wù)器請求數(shù)據(jù)來實現(xiàn)，是一種典型的C/S架構(gòu)。

2.2前端設(shè)計

前端通過html5技術(shù)，從服務(wù)器后端將數(shù)據(jù)得到之后通過webAudio接口，可以實現(xiàn)數(shù)據(jù)的實時可視化。通過對數(shù)據(jù)不同方式的處理，可以實現(xiàn)不同的2D圖形。同時，圖形可以跟隨音頻和音量改變波形，展現(xiàn)出更好的視覺效果.

2.3 web服務(wù)器端設(shè)計

Web服務(wù)器端需要實現(xiàn)數(shù)據(jù)庫與客戶端或前端之間的交互，數(shù)據(jù)流的傳遞。同時，web服務(wù)器端需要充分優(yōu)化，以保證在大量用戶同時訪問時的高并發(fā)狀態(tài)，保證服務(wù)器的負(fù)載均衡，以及快速的響應(yīng)時間。由于要實現(xiàn)對用戶隱私的保護(hù)和對點擊數(shù)據(jù)的收集，還需要增加服務(wù)器的數(shù)量以及安全性能。

2.4 hadoop集群與HDFS分布式存儲系統(tǒng)設(shè)計

文件系統(tǒng)數(shù)據(jù)采用分布式系統(tǒng)存儲，不僅能夠勝任大量用戶訪問的任務(wù)，同時后期也可以利用編寫MR程序來處理用戶使用所產(chǎn)生的大數(shù)據(jù)。

3.軟件設(shè)計與實現(xiàn)

3.1 web服務(wù)器實現(xiàn)

本系統(tǒng)的服務(wù)器端通過Node.js框架實現(xiàn)，分層采用MVC模式，通過連接MongoDB與文件系統(tǒng)，實現(xiàn)對結(jié)構(gòu)化數(shù)據(jù)與非結(jié)構(gòu)化數(shù)據(jù)的存儲，客戶端通過http協(xié)議與服務(wù)器交互。部分代碼如下：

var express = require（"express"）；

var router = express.Router（）；

var mediaPath = 'public/media'；

router.get（'/'， function（req， res）{

var fs = require（"fs"）；

fs.readdir（mediaPath， function（err， files）{

if（err）{

console.log（err）；

}else{

res.render（'index'， {title： 'bayer music'， music： files}）；

}

}）；

}）；

module.exports = router；

3.2 客戶端的實現(xiàn)

客戶端通過Qt實現(xiàn)，圖形界面需要提供播放多媒體流，菜單，暫停，上傳，下載按鈕等。核心代碼的實現(xiàn)如下：

void MyWidget：：InitPlayer（）

{

//窗口基本屬性

setWindowTitle（tr（"多媒體播放器"））；

setMinimumSize（320， 160）；

setMaximumSize（320， 160）；

media_object = new Phonon：：MediaObject（this）；

Phonon：：AudioOutput *audio_output = new Phonon：：AudioOutput（Phonon：：MusicCategory， this）；

Phonon：：createPath（media_object， audio_output）；

//設(shè)置播放動作

QToolBar *tool_bar = new QToolBar（this）；

play_action = new QAction（this）；

play_action->setIcon（QIcon（"：/images/1.png"））；

connect（play_action， SIGNAL（triggered（））， this， SLOT（SetPaused（）））；

//設(shè)置停止動作

stop_action = new QAction（this）；

stop_action->setIcon（QIcon（"：/images/stop.png"））；

connect（stop_action， SIGNAL（triggered（））， this， SLOT（stop（）））；

//設(shè)置下一首

skip_forward_action = new QAction（this）；

skip_forward_action->setIcon（QIcon（"：/images/skipForward.png"））；

skip_forward_action->setText（tr（"上一首（Ctrl+Right）"））；

skip_forward_action->setShortcut（QKeySequence（"Ctrl+Right"））；

connect（skip_forward_action， SIGNAL（triggered（））， this， SLOT（SkipForward（）））；

}

3.3可視化的實現(xiàn)

數(shù)據(jù)可視化（Data Visualization）是信息可視化的中的一類指將數(shù)據(jù)用統(tǒng)計圖的方式呈現(xiàn)出來，這種技術(shù)起源于與1960s計算機(jī)圖形學(xué)，使用計算機(jī)創(chuàng)建圖形圖表，可視化的將數(shù)據(jù)各種屬性變量呈現(xiàn)出來。一般有數(shù)據(jù)采集、分析、治理、管理、挖掘等一系列復(fù)雜的數(shù)據(jù)處理過程，然后在創(chuàng)建對應(yīng)的可視化算法。例如餅圖，散點圖，柱狀圖等都是數(shù)據(jù)可視化常見應(yīng)用。此播放器的動態(tài)柱狀圖就是根據(jù)節(jié)奏頻率的數(shù)據(jù)可視化而展現(xiàn)的，部分核心代碼展示：

/*可視化*/

MusicVisualizer.visualize = function（mv）{

mv.analyser.fftSize = mv.size * 2；

var arr = new Uint8Array（mv.analyser.frequencyBinCount）；

var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame||window.oRequestAnimationFrame || window.mzRequestAnimationFrame；

MusicVisualizer.isFunction（mv.visualizer）&& requestAnimationFrame（v）；

}

MusicVisualizer.prototype.decode=function（arraybuffer， fun）{

var self=this；

MusicVisualizer.ac.decodeAudioData（arraybuffer， function（buffer）{

var bufferSourceNode = MusicVisualizer.ac.createBufferSource（）；

bufferSourceNode.buffer = buffer；

fun.call（bufferSourceNode）；

}，function（err）{

console.log（err）；

}）

}

二、結(jié)語

本文討論了一款基于Qt與node.js的跨平臺可視化多媒體播放器，該系統(tǒng)可以在web端，PC端，android客戶端，IOS客戶端等多平臺安全訪問。同時，本文還提出了一種客戶端與前端通過請求web服務(wù)器連接NoSQL，實時解析音頻文件生成圖像，通過音頻與音量實時變化，實現(xiàn)數(shù)據(jù)可視化的方案。

參考文獻(xiàn)

[1]孫增圻.系統(tǒng)分析與控制.清華大學(xué)出版社

[2]Brain Goetz 等 Java 并發(fā)編程實戰(zhàn). 機(jī)械工業(yè)出版社

[3]Jasmin Blanchette 等 C++ GUI Qt4 編程. 電子工業(yè)出版社

[4]吳軍. 數(shù)學(xué)之美 .人民郵電出版社.

[5]陸文周. Qt5. 開發(fā)及實例. 電子工業(yè)出版社.