C# · 12月 22, 2021

QT5:C++实现基于multimedia的音乐播放器(一)

上一篇里简略的描述了一下播放器的实现,这一篇开始具体描述一下过程。

环境配置:Qt Creator

打开Qt Creator,创建一个new project,项目名称随你喜欢(我的是MusicPlayer),类名也随你喜欢(我的是Music),基类选择QWidget,不勾选界面UI(你也可以勾选UI,用QT自带的UI设计来创建界面),然后要记住项目保存路径不能有中文。

创建成功后,在MusicPlayer.pro(项目名称.pro)里加上“QT += multimedia”这一句:

QT += QT += greaterThan(QT_MAJOR_VERSION,): QT += widgets

然后在头文件music.h(类名.h)里添加要用到的头文件名:

#include #include #include #include #include #include #include #include #include #include

并且在music类里写上要用到的对象成员和函数:

Music : Music(QWidget *parent = volumChange( showMessage( seekChange( QPushButton * QPushButton * QPushButton * QPushButton * QPushButton * QPushButton * QPushButton * QPushButton * QSlider * QSlider * QLabel * QLabel * QLabel * QLabel * QLabel * QListWidget * QTimer * QTimer * QMediaPlayer * QMediaPlaylist * paintEvent(QPaintEvent * mousePressEvent(QMouseEvent * mouseMoveEvent(QMouseEvent * };

还要在源文件music.cpp里加上要用的头文件名:

#include #include #include @H_404_201@ #include #include #include #include #include #include #include

接着添加资源文件,把要用的图标和背景图片都添加到项目里,然后就可以在music.cpp里写播放器的界面了。

Music::Music(QWidget * background.load(); -> resize(background.width(),background.height()); -> setWindowFlags(Qt::FramelessWindowHint); add = moved = timer = QTimer( timer2 = QTimer( player = QMediaPlayer(); playList = init_controls(); init_skin(); connect(player,SIGNAL(MetaDataAvailableChanged()),,SLOT(showMessage( connect(seekSlider,SIGNAL(sliderMoved()),SLOT(seekChange( }

因为我创建的是一个无法移动的窗体,所以重写鼠标左键函数来让它可以被移动,这样的话,鼠标左键按住时可以拖动窗体了:

Music::mousePressEvent(QMouseEvent *(->buttons()===->globalPos()–><span style=”color: #0000ff”>void Music::mouseMoveEvent(QMouseEvent <span style=”color: #0000ff”>event<span style=”color: #000000″>)
{
<span style=”color: #0000ff”>if(<span style=”color: #0000ff”>event->buttons() & Qt::LeftButton)
<span style=”color: #000000″> {
<span style=”color: #0000ff”>this ->move(<span style=”color: #0000ff”>event->globalPos() -<span style=”color: #000000″> dragPosition);
<span style=”color: #0000ff”>event-><span style=”color: #000000″>accept();
}
}
<span style=”color: #008000″>//<span style=”color: #008000″>绘制背景
<span style=”color: #0000ff”>void Music::paintEvent(QPaintEvent <span style=”color: #0000ff”>event<span style=”color: #000000″>)
{
QPainter paint(<span style=”color: #0000ff”>this<span style=”color: #000000″>);
QPixmap backgound;
backgound.load(<span style=”color: #800000″>”<span style=”color: #800000″>:/image/music_bg.bmp<span style=”color: #800000″>”<span style=”color: #000000″>);
paint.drawPixmap(<span style=”color: #800080″>0,<span style=”color: #800080″>0<span style=”color: #000000″>,backgound.width(),backgound.height(),backgound);
<span style=”color: #0000ff”>event -><span style=”color: #000000″>accept();

}

然后写创建按钮的函数以及连接槽函数来响应信号的连接语句:

= QPushButton(-> setObjectName(); BtnClose -> setGeometry(,,,); BtnClose -> setToolTip(tr(-> setCursor(QCursor(Qt::PointingHandCursor));= QPushButton(->setObjectName(tr(->setGeometry(,,,->setToolTip(tr(->playPattern</span>=<span style=”color: #0000ff”&gt;new</span> QPushButton(<span style=”color: #0000ff”&gt;this</span><span style=”color: #000000″&gt;);</span><span style=”color: #008000″&gt;/*</span><span style=”color: #008000″&gt;QIcon icon1(“:/image/Seq.png”);playPattern->setIcon(icon1);</span><span style=”color: #008000″&gt;*/</span><span style=”color: #000000″&gt;playPattern</span>->setObjectName(tr(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;playPattern</span><span style=”color: #800000″&gt;”</span><span style=”color: #000000″&gt;));playPattern</span>->setGeometry(<span style=”color: #800080″&gt;20</span>,<span style=”color: #800080″&gt;255</span>,<span style=”color: #800080″&gt;50</span>,<span style=”color: #800080″&gt;50</span><span style=”color: #000000″&gt;);playPattern</span>->setToolTip(tr(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;列表循环</span><span style=”color: #800000″&gt;”</span><span style=”color: #000000″&gt;));playPattern</span>-><span style=”color: #000000″&gt;setCursor(QCursor(Qt::PointingHandCursor));BtnPlay</span>=<span style=”color: #0000ff”&gt;new</span> QPushButton(<span style=”color: #0000ff”&gt;this</span><span style=”color: #000000″&gt;);BtnPlay</span>->setObjectName(tr(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;BtnPlay</span><span style=”color: #800000″&gt;”</span><span style=”color: #000000″&gt;));BtnPlay</span>->setGeometry(<span style=”color: #800080″&gt;160</span>,<span style=”color: #800080″&gt;250</span>,<span style=”color: #800080″&gt;56</span>,<span style=”color: #800080″&gt;56</span><span style=”color: #000000″&gt;);BtnPlay</span>->setToolTip(tr(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;播放</span><span style=”color: #800000″&gt;”</span><span style=”color: #000000″&gt;));BtnPlay</span>-><span style=”color: #000000″&gt;setCursor(QCursor(Qt::PointingHandCursor));BtnPrev</span>=<span style=”color: #0000ff”&gt;new</span> QPushButton(<span style=”color: #0000ff”&gt;this</span><span style=”color: #000000″&gt;);BtnPrev</span>->setObjectName(tr(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;BtnPrev</span><span style=”color: #800000″&gt;”</span><span style=”color: #000000″&gt;));BtnPrev</span>->setGeometry(<span style=”color: #800080″&gt;120</span>,<span style=”color: #800080″&gt;45</span>,<span style=”color: #800080″&gt;45</span><span style=”color: #000000″&gt;);BtnPrev</span>->setToolTip(tr(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;上一首</span><span style=”color: #800000″&gt;”</span><span style=”color: #000000″&gt;));BtnPrev</span>-><span style=”color: #000000″&gt;setCursor(QCursor(Qt::PointingHandCursor));BtnNext</span>=<span style=”color: #0000ff”&gt;new</span> QPushButton(<span style=”color: #0000ff”&gt;this</span><span style=”color: #000000″&gt;);BtnNext</span>->setObjectName(tr(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;BtnNext</span><span style=”color: #800000″&gt;”</span><span style=”color: #000000″&gt;));BtnNext</span>->setGeometry(<span style=”color: #800080″&gt;210</span>,<span style=”color: #800080″&gt;45</span><span style=”color: #000000″&gt;);BtnNext</span>->setToolTip(tr(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;下一首</span><span style=”color: #800000″&gt;”</span><span style=”color: #000000″&gt;));BtnNext</span>-><span style=”color: #000000″&gt;setCursor(QCursor(Qt::PointingHandCursor));muteButton</span>=<span style=”color: #0000ff”&gt;new</span> QPushButton(<span style=”color: #0000ff”&gt;this</span><span style=”color: #000000″&gt;);muteButton</span>->setObjectName(tr(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;muteButton</span><span style=”color: #800000″&gt;”</span><span style=”color: #000000″&gt;));muteButton</span>->setGeometry(<span style=”color: #800080″&gt;370</span>,<span style=”color: #800080″&gt;320</span>,<span style=”color: #800080″&gt;25</span><span style=”color: #000000″&gt;);muteButton</span>->setToolTip(tr(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;<a href=”https://www.jb51.cc/tag/guanbi/” target=”_blank” class=”keywords”>关闭</a>声音</span><span style=”color: #800000″&gt;”</span><span style=”color: #000000″&gt;));muteButton</span>-><span style=”color: #000000″&gt;setCursor(QCursor(Qt::PointingHandCursor));volumeControl</span>=<span style=”color: #0000ff”&gt;new</span> QSlider(Qt::Vertical,<span style=”color: #0000ff”&gt;this</span>);<span style=”color: #008000″&gt;//</span><span style=”color: #008000″&gt;QSlider(Qt::Vertical,this)创建<a href=”https://www.jb51.cc/tag/yige/” target=”_blank” class=”keywords”>一个</a>竖直方向的滑动条QSlider控件</span>volumeControl->setObjectName(tr(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;volumeControl</span><span style=”color: #800000″&gt;”</span><span style=”color: #000000″&gt;));volumeControl</span>->setGeometry(<span style=”color: #800080″&gt;375</span>,<span style=”color: #800080″&gt;240</span>,<span style=”color: #800080″&gt;15</span>,<span style=”color: #800080″&gt;80</span><span style=”color: #000000″&gt;);volumeControl</span>-><span style=”color: #000000″&gt;setCursor(QCursor(Qt::PointingHandCursor));volumeControl</span>->setRange(<span style=”color: #800080″&gt;0</span>,<span style=”color: #800080″&gt;100</span>);<span style=”color: #008000″&gt;//</span><span style=”color: #008000″&gt;设置滑动条控件的最小值和最大值</span>volumeControl ->setValue(<span style=”color: #800080″&gt;50</span>);<span style=”color: #008000″&gt;//</span><span style=”color: #008000″&gt;设置初值为50;</span>

<span style=”color: #000000″>
seekSlider = <span style=”color: #0000ff”>new QSlider(Qt::Horizontal,<span style=”color: #0000ff”>this);<span style=”color: #008000″>//<span style=”color: #008000″>QSlider(Qt::Horizontal,this)创建一个水平方向的滑动条QSlider控件
seekSlider -> setGeometry(<span style=”color: #800080″>100,<span style=”color: #800080″>345,<span style=”color: #800080″>200,<span style=”color: #800080″>15<span style=”color: #000000″>);
seekSlider->setObjectName(tr(<span style=”color: #800000″>”<span style=”color: #800000″>seekSlider<span style=”color: #800000″>”<span style=”color: #000000″>));
seekSlider -><span style=”color: #000000″> setCursor(QCursor(Qt::PointingHandCursor));

addMore </span>= <span style=”color: #0000ff”&gt;new</span> QPushButton(<span style=”color: #0000ff”&gt;this</span><span style=”color: #000000″&gt;);addMore </span>-> setGeometry(<span style=”color: #800080″&gt;295</span>,<span style=”color: #800080″&gt;30</span><span style=”color: #000000″&gt;);addMore </span>-> setObjectName(tr(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;addMore</span><span style=”color: #800000″&gt;”</span><span style=”color: #000000″&gt;));addMore</span>->setToolTip(tr(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;<a href=”https://www.jb51.cc/tag/tianjia/” target=”_blank” class=”keywords”>添加</a>歌曲</span><span style=”color: #800000″&gt;”</span><span style=”color: #000000″&gt;));addMore </span>-><span style=”color: #000000″&gt; setCursor(QCursor(Qt::PointingHandCursor));showMge </span>= <span style=”color: #0000ff”&gt;new</span> QLabel(<span style=”color: #0000ff”&gt;this</span><span style=”color: #000000″&gt;);showMge </span>-> setGeometry(<span style=”color: #800080″&gt;34</span>,<span style=”color: #800080″&gt;400</span>,<span style=”color: #800080″&gt;20</span><span style=”color: #000000″&gt;);showMge </span>-> setFont(QFont(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;Times</span><span style=”color: #800000″&gt;”</span>,<span style=”color: #800080″&gt;10</span>,QFont::Bold));<span style=”color: #008000″&gt;//</span><span style=”color: #008000″&gt;字体使用Times,10号字体,加粗</span>QPalette pac;<span style=”color: #008000″&gt;//</span><span style=”color: #008000″&gt;创建调色板</span>pac.setColor(QPalette::WindowText,QColor(<span style=”color: #800080″&gt;70</span>,<span style=”color: #800080″&gt;80</span>,<span style=”color: #800080″&gt;70</span><span style=”color: #000000″&gt;));showMge </span>-><span style=”color: #000000″&gt; setPalette(pac);list </span>= <span style=”color: #0000ff”&gt;new</span> QListWidget(<span style=”color: #0000ff”&gt;this</span><span style=”color: #000000″&gt;);list </span>->setGeometry(<span style=”color: #800080″&gt;20</span>,<span style=”color: #800080″&gt;360</span>,<span style=”color: #800080″&gt;180</span><span style=”color: #000000″&gt;);list </span>-> setFont(QFont(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;Times</span><span style=”color: #800000″&gt;”</span>,<span style=”color: #800080″&gt;10</span><span style=”color: #000000″&gt;,QFont::Bold));list </span>-><span style=”color: #000000″&gt; setPalette(pac);list </span>->setStyleSheet(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;background: rgba(0,0.1);</span><span style=”color: #800000″&gt;”</span><span style=”color: #000000″&gt;);message </span>= <span style=”color: #0000ff”&gt;new</span> QLabel(<span style=”color: #0000ff”&gt;this</span><span style=”color: #000000″&gt;);message </span>-> setGeometry(<span style=”color: #800080″&gt;20</span>,<span style=”color: #800080″&gt;140</span>,<span style=”color: #800080″&gt;20</span><span style=”color: #000000″&gt;);message </span>-> setFont(QFont(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;Times</span><span style=”color: #800000″&gt;”</span>,QFont::Bold));message </span>-><span style=”color: #000000″&gt; setPalette(pac);showPro </span>= <span style=”color: #0000ff”&gt;new</span> QLabel(<span style=”color: #0000ff”&gt;this</span><span style=”color: #000000″&gt;);showPro </span>-> setGeometry(<span style=”color: #800080″&gt;35</span>,<span style=”color: #800080″&gt;340</span>,<span style=”color: #800080″&gt;20</span><span style=”color: #000000″&gt;);showPro </span>-> setFont(QFont(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;Times</span><span style=”color: #800000″&gt;”</span>,QFont::Bold));showPro </span>-><span style=”color: #000000″&gt; setPalette(pac);QTime mov(</span><span style=”color: #800080″&gt;0</span>,<span style=”color: #800080″&gt;0</span>,<span style=”color: #800080″&gt;0</span><span style=”color: #000000″&gt;);showPro </span>->setText(mov.toString(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;mm:ss</span><span style=”color: #800000″&gt;”</span><span style=”color: #000000″&gt;));showTime </span>= <span style=”color: #0000ff”&gt;new</span> QLabel(<span style=”color: #0000ff”&gt;this</span><span style=”color: #000000″&gt;);showTime </span>-> setGeometry(<span style=”color: #800080″&gt;325</span>,<span style=”color: #800080″&gt;20</span><span style=”color: #000000″&gt;);showTime </span>-> setFont(QFont(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;Times</span><span style=”color: #800000″&gt;”</span>,QFont::Bold));showTime </span>-><span style=”color: #000000″&gt; setPalette(pac);QTime mo(</span><span style=”color: #800080″&gt;0</span>,<span style=”color: #800080″&gt;0</span>);<span style=”color: #008000″&gt;//</span><span style=”color: #008000″&gt;QTime 提供<a href=”https://www.jb51.cc/tag/shijianhan/” target=”_blank” class=”keywords”>时间函</a>数给<a href=”https://www.jb51.cc/tag/yonghu/” target=”_blank” class=”keywords”>用户</a>使用</span>showTime ->setText(mo.toString(<span style=”color: #800000″&gt;”</span><span style=”color: #800000″&gt;mm:ss</span><span style=”color: #800000″&gt;”</span>));<span style=”color: #008000″&gt;//</span><span style=”color: #008000″&gt;<a href=”https://www.jb51.cc/tag/xianshi/” target=”_blank” class=”keywords”>显示</a>分:秒</span>

<span style=”color: #000000″>
title = <span style=”color: #0000ff”>new QLabel(<span style=”color: #0000ff”>this);<span style=”color: #008000″>//<span style=”color: #008000″>设置标题
title -> setGeometry(<span style=”color: #800080″>5,<span style=”color: #800080″>30<span style=”color: #000000″>);
title ->setFont(QFont(<span style=”color: #800000″>”<span style=”color: #800000″>Times<span style=”color: #800000″>”,<span style=”color: #800080″>15<span style=”color: #000000″>,QFont::Bold));
QPalette pa;
pa.setColor(QPalette::WindowText,QColor(<span style=”color: #800080″>0,<span style=”color: #800080″>0<span style=”color: #000000″>));
title -><span style=”color: #000000″> setPalette(pa);
title -> setText(<span style=”color: #800000″>”<span style=”color: #800000″>MusicPlayer<span style=”color: #800000″>”<span style=”color: #000000″>);

</span><span style=”color: #008000″&gt;//</span><span style=”color: #008000″&gt;信号与槽</span>connect(BtnClose,SIGNAL(clicked(<span style=”color: #0000ff”&gt;bool</span>)),<span style=”color: #0000ff”&gt;this</span><span style=”color: #000000″&gt;,SLOT(close()));connect(BtnMin,SIGNAL(clicked(</span><span style=”color: #0000ff”&gt;bool</span>)),SLOT(showMinimized()));connect(addMore,SLOT(addMoremusic()));connect(BtnPlay,SLOT(playMusic()));connect (BtnPrev,SLOT(preMusic()));connect(BtnNext,SLOT(nextMusic()));connect(muteButton,SLOT(mete<a href=”https://www.jb51.cc/tag/open/” target=”_blank” class=”keywords”>open()</a>));connect(volumeControl,SIGNAL(sliderMoved(</span><span style=”color: #0000ff”&gt;int</span>)),SLOT(volumChange(<span style=”color: #0000ff”&gt;int</span><span style=”color: #000000″&gt;)));connect(player,SIGNAL(positionChanged(qint64)),</span><span style=”color: #0000ff”&gt;this</span><span style=”color: #000000″&gt;,SLOT( positionChange(qint64)));connect(playPattern,SLOT(musicPlayPattern()));

}

但界面很丑,所以下一步就是加载qss文件,绘制界面样式:

QFile file( -> }

我的qss代码如下(qss和css的语法几乎一模一样):

QPushButton#playPattern:! border-image: url(:/image/ border-image: url(:/image/ border-image: url(:/image/ QPushButton#BtnClose:! border-image: url(:/image/ border-image: url(:/image/ border-image: url(:/image/ QPushButton#BtnClose:focus{padding:- border-image: url(:/image/ QPushButton#BtnMin:! border-image: url(:/image/ border-image: url(:/image/ border-image: url(:/image/ QPushButton#BtnMin:focus{padding:- QPushButton#BtnPlay:! border-image: url(:/image/ border-image: url(:/image/ border-image: url(:/image/ padding:- QPushButton#BtnPrev:! border-image: url(:/image/ border-image: url(:/image/ border-image: url(:/image/ QPushButton#BtnPrev:focus{padding:- QPushButton#BtnNext:! border-image: url(:/image/ border-image: url(:/image/ border-image: url(:/image/ QPushButton#BtnNext:focus{padding:- QPushButton#muteButton:! border-image: url(:/image/ border-image: url(:/image/ border-image: url(:/image/ QPushButton#muteButton:focus{padding:- background: rgba(, border- QSlider#volumeControl::sub- background: rgba(, border: 0px solid # border- QSlider#volumeControl::add- background:url(:/image/ border: 0px solid # border- border-image:url(:/image/ border: 0px solid # margin-left:- margin-right:- margin-top: – margin-bottom: – border- border-left:- background: rgba(, border- QSlider#seekSlider::sub- background:url(:/image/ border: 0px solid # border- QSlider#seekSlider::add- background: rgba(, border: 0px solid # border- background:url(:/image/ border: 0px solid # border- border- margin- margin-right:- margin-top: – margin-bottom: – border- }

这样样式就已经基本搞定了,只剩下写槽函数来实现具体功能了。