基于Qt的高性能網絡音樂播放器的設計與實現

鄢 濤, 劉永紅, 趙衛東, 余 悅, 曾 誼, 于 曦

(1.成都大學 模式識別與智能信息處理四川省高校重點實驗室, 四川 成都 610106； 2.成都大學 信息科學與工程學院, 四川 成都 610106)

基于Qt的高性能網絡音樂播放器的設計與實現

鄢 濤1,2, 劉永紅1,2, 趙衛東1,2, 余 悅2, 曾 誼2, 于 曦1,2

(1.成都大學 模式識別與智能信息處理四川省高校重點實驗室, 四川 成都 610106； 2.成都大學 信息科學與工程學院, 四川 成都 610106)

目前基于網絡的音樂播放器功能普遍存在2個主要問題：廣告太多；在后臺運行不必要的進程而導致性能較低.針對這些情況，設計并實現了一款基于Qt的高性能網絡音樂播放器.該播放器利用開放的音樂搜索應用程序編程接口，實現了在線搜索、在線播放、下載音樂及桌面歌詞等功能.此外，用戶界面設計中采用雙緩沖繪圖技術，并且程序經過大量代碼層面的優化，使得該播放器純凈并擁有非常良好的性能表現.

Qt；在線音樂；播放器；高性能；雙緩沖

0 引 言

互聯網上有非常豐富的音樂資源，也有不少基于這些資源的音樂播放器.這些音樂播放器普遍功能都較強大，但出于商業因素，通常會嵌入很多廣告、新聞，甚至會經常出現彈窗給用戶帶來影響.同時，由于軟件功能的多樣化和復雜性，這些音樂播放器很難做到性能優異[1-2].Qt是一個基于C++的跨平臺圖形用戶界面(Graphical User Interface,GUI)應用程序開發框架，它提供給應用程序開發者建立藝術級GUI所需的所有功能，允許組件編程，且易擴展.此外，Qt提供了較豐富的套接字、傳輸控制協議、文件傳輸協議等與平臺無關的類，能夠方便地進行網絡功能開發[3-7].本研究討論了利用Qt的GUI框架和網絡功能，以及雙緩沖技術，實現了一款純凈、高性能的音樂播放器，其既具有網絡音樂播放器的常用功能，也可以實現播放本地音樂.

1 核心功能設計

1.1 網絡功能應用程序編程接口(Application Programming Interface,API)的封裝

要實現在線試聽，需要有相關的音樂搜索API.目前，許多播放器公司都提供開放的音樂搜索API，如酷狗音樂的API為：http://mobilecdn.kugou.com/api/v3/search/song?format=jsonp&keyword={0}&page={1}&pagesize={2}″&showtype=1&callback=kgJSONP238513750.其中，{0}表示需要搜索的歌曲或歌手，{1}表示查詢的頁碼數，{2}表示當前頁的返回數量.

以上API的請求方式為GET，返回數據為一個JSON對象，通過對JSON進行解析，就可以得到想要的數據.Qt已經提供了JSON解析的相關類，只需要根據酷狗音樂的JSON數據規則編寫相關解析代碼即可，

QVector analysis(QNetworkReply *reply)

{

QByteArray json=reply->readAll();/*API返回的是

JSON數據*/

QJsonParseError error;

QJsonDocument doucoument=QJsonDocument::fromJson(json,

&error);

QJsonObject obj=doucoument.object();

QJsonArray jsArray=obj.take(″data″).toObject().take

(″info″).toArray();/*有效數據*/

int size=jsArray.size();

QVector t(size);

for (int i=0;i

{

t[i].hashCode=jsArray[i].toObject().take(″hash″).

toString();/*音樂哈希碼，通過它來實現播放*/

t[i].musicName=jsArray[i].toObject().take

(″songname″).toString();/*音樂名*/

t[i].singer=jsArray[i].toObject().take

(″singername″).toString();/*歌手名*/

t[i].duration=jsArray[i].toObject().take

(″duration″).toInt();/*音樂時長*/

}

return t;

}

1.2 定時器與界面更新

音樂播放的過程中，需要隨時對主界面進行更新，更新的內容包括進度條及歌詞等.這時，就需要使用操作系統提供的“定時器”功能，每隔一段時間對界面進行一次更新.Qt已經把“定時器”封裝成一個叫做QTimer的類，這個類的使用也是非常簡單的，只需要編寫好處理函數即可.處理函數如下，

void update()

{

auto intToString=[this](size-t)->QString/*匿名函數，

用于把時間轉換成一定格式的字符串*/

{

size-t min,sec;

QString minStr,secStr;

min=t/60;

t-=min*60;

sec=t;

minStr+=QString::number(min);

if (min<10)

{

minStr.push-front(′0′);

}

secStr+=QString::number(sec);

if (sec<10)

{

secStr.push-front(′0′);

}

return minStr+′:′+secStr;

};

playProgress=player->position();/*同步已播放的長度*/

lyricsBar->updateLyrics(playProgress);/*重繪桌面歌詞*/

if (playProgress-lastUpdateTime>1000)/*進度條不必隨

時更新，1 000 ms更新一次即可*/

{

lastUpdateTime=playProgress;

progress->setText(intToString(playProgress/1000)+

′/′+intToString(maxDuration/1000));

songSlider->setValue(playProgress/1000);

}

}

2 界面設計

2.1 無邊框窗口拖動

每個GUI程序都可以通過標題欄來實現窗口拖動.為了音樂播放器的美觀，通常會省略標題欄.如果想要任意拖動窗口，就需要編寫相關事件代碼來實現.

Windows系統中，存在各種“消息”，如鼠標消息、按鍵消息等.Qt已經把想要的“消息”封裝成3個函數：mousePressEvent、mouseMoveEvent、mouseReleaseEvent.通過重寫這些函數，即可實現對鼠標行為的定制，

void mouseReleaseEvent(QMouseEvent*event)

{

isPress=false;

}

void mousePressEvent(QMouseEvent*event)

{

lastPos=event->globalPos();/*記錄鼠標的當前位置*/

isPress=true;/*標記鼠標是否在主面板上按下*/

}

void mouseMoveEvent(QMouseEvent*event)

{

if (isPress)/*鼠標按下的時候才移動，防止從子控件移

動到主面板上時產生的“瞬移”*/

{

int dx=event->globalX()-lastPos.x();

int dy=event->globalY()-lastPos.y();

lastPos=event->globalPos();

move(x()+dx,y()+dy);/*通過鼠標上次出現的位

置與當前位置的差，求出窗口的移動方向和長度*/

}

}其中，isPress是播放器的一個內部變量，它的存在十分關鍵.Qt提供了很多種無邊框窗口移動的代碼，但其幾乎都沒有isPress的存在.這種情況下，如果在播放器主面板的一個子控件上按下鼠標，然后把鼠標移動到主面板上，播放器窗口就會出現“瞬移”現象，因此必須引入isPress才能解決問題.

2.2 用QSS美化界面

QSS(Qt Style Sheets)是一種類似于WEB設計中層疊樣式表(Cascading Style Sheets,CSS)技術的設計語言，它的目標和CSS相同，即實現表現與內容分離.通過QSS，可以很方便地實現界面的美化，而不需要編寫大量用于控件自繪的代碼.比如，設置按鈕的背景圖片，

QPushButton#closeBt

{

border-image:url(″data/icon/closeNormal.png″);

height:18px;

width:23px;

border:0px;

}

QPushButton#closeBt:hover

{

border-image:url(″data/icon/closeHover.png″);

height:18px;

width:23px;

border:0px;

}

QPushButton#closeBt:pressed

{

border-image:url(″data/icon/closePress.png″);

height:18px;

width:23px;

border:0px;

}

同時，QSS還能對按鈕closeBt的普通、懸停、按下3個狀態分別設置不同背景圖片(見圖1).

圖1 QSS美化之后的播放器界面

2.3 皮膚更換

QSS能完成絕大多數界面美化工作，但不包括播放器主面板這個頂級窗口的美化.一方面，讓用戶通過修改QSS的方式來更換皮膚是非常不人性化的；另一方面，QSS也難以應對用戶選擇圖片當皮膚的需求.所以，要實現皮膚更換，只有重寫paintEvent實現窗口自繪.主要功能代碼如下，

void paintEvent(QPaintEvent*e)

{

QPainter painter(this);

painter.drawPixmap(rect(),skin);/*按照窗口的大小繪制

圖片*/

QWidget::paintEvent(e);/*調用父類的繪圖函數，保證其

他部分能正確繪制*/

}

其中，skin是一個QPixmap類的對象，里面容納著當前的皮膚.更換皮膚時，只需要修改skin，然后重繪界面即可.

3 歌詞的處理

3.1 用正則表達式解析歌詞

歌詞的處理看似簡單，實際上比較復雜.目前，一種主流的歌詞文件格式是.Lrc，要解析的正是這種格式的歌詞文件.Lrc文件的每一行格式如下，

[mm:ss.xx]歌詞內容

其中，mm表示分鐘數，ss表示秒數，xx表示百分之一秒數.這個數據指明某一句歌詞出現的具體時間，而中括號后面的內容則是歌詞的正式內容.

Lrc文件的規律性如此之強，以至于可以直接使用正則表達式來對其進行解析.很多廠商都提供了正則表達式解析引擎，C++ 11標準也讓正則表達式解析進入了C++的標準.不過由于播放器基于Qt開發，所以最終采用Qt提供的解析器.正則表達式的解析代碼如下，

QRegExp regexp;

regexp.setPattern(″\d{2}(?=:)″);/*設置匹配模式，匹配 一個長度為2的數字及:*/

regexp.indexIn(lyrics);

int minute=regexp.cap(0).toInt();/*將匹配到的第一個作為 分鐘數*/

regexp.setPattern(″\d{2}(?=\.)″);/*匹配一個長度為 2的數字及.*/

regexp.indexIn(lyrics);

int second=regexp.cap(0).toInt();/*將匹配到的第一個作為 秒數*/

regexp.setPattern(″\d{2}(?=\])″);/*匹配一個長度為 2的數字及]*/

regexp.indexIn(lyrics);

int millisecond = regexp.cap(0).toInt();/*將匹配到的第一個 作為百分之一秒數*/

int duration=minute*60000+second*1000+millisecond*10; /*簡單的時間轉換*/

regexp.setPattern(″\[\d{2}:\d{2}\.\d{2}\]″);

QString lrcString=lyrics.replace(regexp,″″);/*將所有的時間戳

替換成空字符串，結果即為歌詞*/

以上代碼只說明了解析的過程，實際代碼要更復雜一些.

3.2 滾動歌詞的實現

大多數播放器顯示歌詞時，都會給歌詞添加一點“動態”效果，看起來就像在“滾動”一樣.實際上，所謂的“滾動”效果，實現起來并不復雜.繪制歌詞時，繪制兩層文字：第一層完全繪制，第二層則根據進度來繪制其中某些部分.由于界面更新速度非常快，所以看起來就好像是歌詞在滾動一般.相關實現為，

void paint()

{

QPainter painter(this);

painter.setFont(font);

painter.setPen(QColor(0,0,0));

painter.drawText(1,1,800,58,Qt::AlignVCenter|Qt::

AlignLeft,first);/*繪制一層黑色文字作為

基底，讓歌詞顯得更有質感*/

painter.setPen(QPen(normalGradient1,0));/*繪制第一層

漸變文字，漸變可以被用戶所設置*/

painter.drawText(0,0,800,58,Qt::AlignVCenter|Qt::

AlignLeft,first);/*對齊方式為左對齊*/

painter.setPen(QPen(maskGradient1,0));/*繪制遮罩層*/

painter.drawText(0,0,progress*maxPix,58,Qt::

AlignVCenter|Qt::AlignLeft,first);/*progress是當前進度，

通過這個參數可以控制遮罩部分的寬度*/

}

3.3 雙緩沖繪圖技術

播放器需要繪制的歌詞非常多，除了桌面歌詞，還有嵌在主面板的窗口歌詞，而這些歌詞需要經常更新(設定50 ms更新一次).在Debug模式下，音樂播放器平均CPU占用為5%(CPU主頻為2.6 GHz).如果換用Release模式，理論上能把CPU占用減少到3%，但播放器的性能依然太差.

通過對代碼分析發現，形如painter.drawText這樣的代碼非常多，性能瓶頸也正是來自這樣的代碼.從內存(顯存)向屏幕繪制圖像，速度非常慢.如果每50 ms都要進行大量繪制工作，CPU的開銷就相當大.這時，可采用雙緩沖繪圖技術，即先一次性把所有文字繪制到內存(顯存)中，然后再一次性把內存中的數據繪制到屏幕上.由于往內存繪制文字的速度遠遠高于往屏幕繪制的速度，所以即使雙緩沖繪圖看起來多了一些額外工作，而實際上卻擁有更好的性能表現.雙緩沖的原理如下，

void paint()

{

QPixmap pix(width,height);

pix.fill(Qt::transparent);/*新建畫布，并用透明色填充*/

QPainter painter(&pix);/*現在painter將在畫布上繪圖*/

painter.setFont(font);

painter.setPen(QColor(255,255,255));

painter.drawText(firstRect, Qt::AlignCenter, firstText);

…/*大量的文字繪制*/

painter.setPen(QColor(255,255,255));

painter.drawText(seventhRect,Qt::AlignCenter,seventhText);

painter.drawPixmap(rect(),pix);/*將畫布中的內容一次

性繪制到屏幕上*/

}

實際上，以上代碼也只展示了雙緩沖繪圖的基本操作方式，實際代碼根據需要做了優化，比如，不必每次都繪制底層文字，也不必每次都重新填充畫布，完全可以在繪制完所有底層文字之后，將畫布保存起來，以后每次更新時，只需往畫布上繪制遮罩層即可，直到歌詞內容需要改變為止(見圖2).

圖2 最終效果

采用雙緩沖繪圖技術優化之后，播放器在Debug下的平均CPU占用減少到2.5%，在Release模式下更是減少到了1%.這樣的性能表現非常優秀，因為主流播放器的平均CPU占用都在2%到3%之間.

4 結 論

本研究設計并實現了一款基于Qt技術的網絡音樂播放器.該播放器純凈無廣告、功能完善且性能高.此外，開發過程中所用到的無邊框窗口拖動技術，也可廣泛應用于桌面開發中.需要指出的是，本研究提出的解決方案雖然不復雜，但卻比大多數方案更有效，其中，歌詞解析時靈活使用了正則表達式，而雙緩沖繪圖技術的應用，更是大大提高了繪圖效率.這些技術的總結，對與Qt相關的多媒體開發具有重要參考價值.

[1]Blanchette J,Summerfield M.C++ GUI Qt 4編程[M].閆鋒欣,曾泉人,張志強,譯.北京:電子工業出版社,2013.

[2]焦正才,樊文俠.基于Qt/Embedded的MP3音樂播放器的設計與實現[J].電子設計工程,2012,20(7):148-150.

[3]Gregoire M,Solter N A,Klerper S J.C++高級編程[M].侯普秀,鄭思遙,譯.北京:清華大學出版社,2014.

[4]Wong Michael,IBM XL編譯器中國開發團隊.深入理解C++ 11[M].北京:機械工業出版社,2016.

[5]蔡志明.精通Qt 4編程[M].北京:電子工業出版社,2011.

[6]Summerfield M.Qt高級編程[M].白建平,王軍鋒,閆鋒欣,譯.北京:電子工業出版社,2011.

[7]劉曉立,趙俊逸.基于Qt的音樂播放器[J].軟件導刊,2015,14(10):112-114.

Design and Implementation of High Performance Online Music Player Based on Qt

YANTao1,2,LIUYonghong1,2,ZHAOWeidong1,2,YUYue2,ZENGYi2,YUXi1,2

(1.Key Laboratory of Pattern Recognition and Intelligent Information Processing of Sichuan Province, Chengdu University, Chengdu 610106, China; 2.School of Information Science and Engineering, Chengdu University, Chengdu 610106, China)

Most music players based on Internet have their own powerful functions presently.However,there are two main problems in these music players:one is that there are too many advertisements and the other is that their performance is low due to some processes running background.In order to solve these problems,this paper designs and implements a high performance music player based on Qt software.By fully utilizing the open music search API,the player implements some functions such as online search,online playing,downloading music,desktop lyrics,etc.Furthermore,by using double-buffering technology UI design,and through the optimization of the coding,the player proposed now by this paper is pure and of high performance.

Qt;online music;player;high performance;double-buffering

1004-5422(2017)01-0055-05

2016-11-03.

四川省科技廳軟科學研究計劃(2017ZR0198)資助項目.

鄢 濤(1973 — )， 男， 碩士， 副教授， 從事計算機軟件工程研究.

TN912.23+1；TP311.52

A