基于Qt的跨平台多媒体播放器

2016-05-31李健祥郑丹

中文信息 2016年5期

李健祥++郑丹

摘要：利用开源跨平台图形界面Qt，以及web中的最新开源框架Node.js，我们设计了一款开源的，可视化的，可以横跨windows，IOS，Android，windows phone等多平台的多媒体播放平台。后台通过Node..js搭建服务器，客户端或浏览器可以访问服务器，并为用户提供非结构化数据存储的服务。数据库为MongoDB。

关键词：Qt Node.js 多媒体播放数据可视化跨平台

中图分类号：TP3 文献标识码：A 文章编号：1003-9082（2016）05-0003-02

引言

Node.js是一款为服务器端web开发所设计的开源的，跨平台运行环境。虽然Node.js并不是完全由JavaScript开发的框架，但其中许多基本模块都是由javaScript编写而成。支持异步加载，事件驱动的体系架构。

Qt是一款跨平台的应用程序框架，由于其的轻量化以及运行快捷，被广泛应用于硬件平台开发领域，同时也可以运行在多个主流平台。使用Qt编写图形界面依赖C++，运行效率高。

随着我国互联网时代的爆发，PC互联网已接近饱和，移动互联网发展速度飞快。《中国移动互联网行业市场前瞻与投资战略规划分析报告前瞻》数据显示，截止2013年底，中国手机网民超过5亿，占比达81%。随着wifi与移动4G的普及，移动互联网网民呈爆发趋势。

同时，无论是PC端，移动端，嵌入式平台，都离不开多媒体播放器。然而在数据可视化，跨平台方面还有很大的提升潜力，Qt与Node.js在图形界面和web端都是非常强大的开发环境与框架。同时，大量的用户使用也为hadoop， mapreduce， MongoDB等大数据处理工具提供了很好的应用场景。

一、总体设计

1.基本功能

多媒体播放器的基本功能：播放，暂停，切换，上传，分享。这是无论任何播放器必须具备的功能。在此基础上，本文设计的播放器增加了：音乐可视化，用户音乐播放频率统计等功能。使得播放器的体验更丰富，同时通过收集web服务器与数据库中用户所产生的数据，利用大数据工具对用户行为进行分析。同时，使用云服务器，为使用者提供存储环境。

1.1整体架构

系统分为以下几个部分：客户端，web前端，web服务器，MongoDB数据库，hadoop集群以及HDFS分布式文件系统。

2.整体设计

2.1 客户端设计

客户端设计的目的是为了方便经常使用PC与移动端App的用户。与浏览器请求服务器数据类似，客户端可以通过Qt实现界面，再通过向web服务器请求数据来实现，是一种典型的C/S架构。

2.2前端设计

前端通过html5技术，从服务器后端将数据得到之后通过webAudio接口，可以实现数据的实时可视化。通过对数据不同方式的处理，可以实现不同的2D图形。同时，图形可以跟随音频和音量改变波形，展现出更好的视觉效果.

2.3 web服务器端设计

Web服务器端需要实现数据库与客户端或前端之间的交互，数据流的传递。同时，web服务器端需要充分优化，以保证在大量用户同时访问时的高并发状态，保证服务器的负载均衡，以及快速的响应时间。由于要实现对用户隐私的保护和对点击数据的收集，还需要增加服务器的数量以及安全性能。

2.4 hadoop集群与HDFS分布式存储系统设计

文件系统数据采用分布式系统存储，不仅能够胜任大量用户访问的任务，同时后期也可以利用编写MR程序来处理用户使用所产生的大数据。

3.软件设计与实现

3.1 web服务器实现

本系统的服务器端通过Node.js框架实现，分层采用MVC模式，通过连接MongoDB与文件系统，实现对结构化数据与非结构化数据的存储，客户端通过http协议与服务器交互。部分代码如下：

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 客户端的实现

客户端通过Qt实现，图形界面需要提供播放多媒体流，菜单，暂停，上传，下载按钮等。核心代码的实现如下：

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）；

//设置播放动作

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（）））；

//设置停止动作

stop_action = new QAction（this）；

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

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

//设置下一首

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可视化的实现

数据可视化（Data Visualization）是信息可视化的中的一类指将数据用统计图的方式呈现出来，这种技术起源于与1960s计算机图形学，使用计算机创建图形图表，可视化的将数据各种属性变量呈现出来。一般有数据采集、分析、治理、管理、挖掘等一系列复杂的数据处理过程，然后在创建对应的可视化算法。例如饼图，散点图，柱状图等都是数据可视化常见应用。此播放器的动态柱状图就是根据节奏频率的数据可视化而展现的，部分核心代码展示：

/*可视化*/

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）；

}）

}