李健祥++鄭丹

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

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

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

引言

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

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

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

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

一、總體設(shè)計(jì)

1.基本功能

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

1.1整體架構(gòu)

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

2.整體設(shè)計(jì)

2.1 客戶端設(shè)計(jì)

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

2.2前端設(shè)計(jì)

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

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

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

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

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

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

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

本系統(tǒng)的服務(wù)器端通過(guò)Node.js框架實(shí)現(xiàn)，分層采用MVC模式，通過(guò)連接MongoDB與文件系統(tǒng)，實(shí)現(xiàn)對(duì)結(jié)構(gòu)化數(shù)據(jù)與非結(jié)構(gòu)化數(shù)據(jù)的存儲(chǔ)，客戶端通過(guò)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 客戶端的實(shí)現(xiàn)

客戶端通過(guò)Qt實(shí)現(xiàn)，圖形界面需要提供播放多媒體流，菜單，暫停，上傳，下載按鈕等。核心代碼的實(shí)現(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è)置播放動(dòng)作

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è)置停止動(dòng)作

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可視化的實(shí)現(xiàn)

數(shù)據(jù)可視化（Data Visualization）是信息可視化的中的一類(lèi)指將數(shù)據(jù)用統(tǒng)計(jì)圖的方式呈現(xiàn)出來(lái)，這種技術(shù)起源于與1960s計(jì)算機(jī)圖形學(xué)，使用計(jì)算機(jī)創(chuàng)建圖形圖表，可視化的將數(shù)據(jù)各種屬性變量呈現(xiàn)出來(lái)。一般有數(shù)據(jù)采集、分析、治理、管理、挖掘等一系列復(fù)雜的數(shù)據(jù)處理過(guò)程，然后在創(chuàng)建對(duì)應(yīng)的可視化算法。例如餅圖，散點(diǎn)圖，柱狀圖等都是數(shù)據(jù)可視化常見(jiàn)應(yīng)用。此播放器的動(dò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é)語(yǔ)

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

參考文獻(xiàn)

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

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

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

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

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