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

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

环境配置：Qt Creator

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

创建成功后，在MusicPlayer.pro（项目名称.pro）里加上“QT += multimedia”这一句：

 QT += core gui
 QT += multimedia
 greaterThan(QT_MAJOR_VERSION, ): QT += widgets

然后在头文件music.h（类名.h）里添加要用到的头文件名：

 #include <QWidget>
 #include <QMediaPlayer>
 #include <QPushButton>
 #include <QSlider>
 #include <QLabel>
 #include <QTime>
 #include <QPaintEvent>
 #include <QMediaPlaylist>
 #include <QTimer>
 #include <QListWidget>

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

 class Music : public QWidget
 {
     Q_OBJECT
 public:
     explicit Music(QWidget *parent = );
     static int z;

 public slots:
     void addMoremusic();
     void playMusic();
     void preMusic();
     void nextMusic();
     void meteOpen();
     void volumChange(int);
     void positionChange(qint64 position);
     void showMessage(bool);
     void seekChange(int position);
     void posChange();
     void clearMessage();
     void musicPlayPattern();

 private:
     void init_controls();
     void init_skin();

     QPushButton *BtnClose;
     QPushButton *BtnMin;
     QPushButton *BtnPlay;
     QPushButton *BtnPrev;
     QPushButton *BtnNext;
     QPushButton *muteButton;
     QPushButton *addMore;
     QPushButton *playPattern;
     QSlider     *volumeControl;
     QSlider     *seekSlider;
     QLabel      *showTime;
     QLabel      *showPro;
     QLabel      *showMge;
     QLabel      *title;
     QLabel      *message;
     QListWidget *list;
     bool        add;
     QTimer      *timer;
     QTimer      *timer2;
     int         moved;
     QPoint      dragPosition;
     QMediaPlayer   *player;
     QMediaPlaylist * playList;

 protected:
     void paintEvent(QPaintEvent *event);
     void mousePressEvent(QMouseEvent *event);
     void mouseMoveEvent(QMouseEvent *event);
 };

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

 #include "music.h"
 #include <QPixmap>
 #include <QFile>
 #include <QPainter>
 #include <QFileDialog>
 #include <QUrl>
 #include <QDebug>
 #include <QMediaMetaData>
 #include <QMessageBox>
 #include <QFileInfo>

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

 Music::Music(QWidget *parent) : QWidget(parent)
 {
     QPixmap background;
     background.load(":/image/music_bg.bmp");//加载背景图片
     this -> resize(background.width(),background.height());//设置窗口和背景图片大小一致
     this -> setWindowFlags(Qt::FramelessWindowHint);//产生一个无窗口边框的窗口，用户无法改变它的大小也无法移动它
     add = false;
     moved = ;
     timer = new QTimer(this);
     timer2 = new QTimer(this);

     player = new QMediaPlayer(this);//QMediaplayer用于解析音频文件和视频文件
     playList = new QMediaPlaylist;

     init_controls();//创建按钮
     init_skin();//外部加载qss文件，绘制界面样式

     connect(player, SIGNAL(metaDataAvailableChanged(bool)), this, SLOT(showMessage(bool)));
     connect(seekSlider,SIGNAL(sliderMoved(int)), this,SLOT(seekChange(int)));
 }

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

//令窗口可以被拖动
void Music::mousePressEvent(QMouseEvent *event){
    if(event->buttons()==Qt::LeftButton)
    {
        dragPosition=event->globalPos()-frameGeometry().topLeft();
        event->accept();
    }
}

void Music::mouseMoveEvent(QMouseEvent *event)
{
    if(event->buttons() & Qt::LeftButton)
    {
        this ->move(event->globalPos() - dragPosition);
        event->accept();
    }
}
//绘制背景
void Music::paintEvent(QPaintEvent *event)
{
    QPainter paint(this);
    QPixmap backgound;
    backgound.load(":/image/music_bg.bmp");
    paint.drawPixmap(, , backgound.width(), backgound.height(),backgound);
    event ->accept();

}

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

//创建按钮
void Music::init_controls()
{
    BtnClose = new QPushButton(this);
    BtnClose -> setObjectName("BtnClose");//如果要对这个对象单独设stylesheet的话一定要设置它的objectName
    BtnClose -> setGeometry(,,,);//窗口左上角为原点（X365，Y2），（宽30，高30）
    BtnClose -> setToolTip(tr("退出"));
    BtnClose -> setCursor(QCursor(Qt::PointingHandCursor));//鼠标指针形状为手

    BtnMin=new QPushButton(this);
    BtnMin->setObjectName(tr("BtnMin"));
    BtnMin->setGeometry(,,,);
    BtnMin->setToolTip(tr("最小化"));
    BtnMin->setCursor(QCursor(Qt::PointingHandCursor));

    playPattern=new QPushButton(this);
    /*QIcon icon1(":/image/Seq.png");
    playPattern->setIcon(icon1);*/
    playPattern->setObjectName(tr("playPattern"));
    playPattern->setGeometry(,,,);
    playPattern->setToolTip(tr("列表循环"));
    playPattern->setCursor(QCursor(Qt::PointingHandCursor));

    BtnPlay=new QPushButton(this);
    BtnPlay->setObjectName(tr("BtnPlay"));
    BtnPlay->setGeometry(,,,);
    BtnPlay->setToolTip(tr("播放"));
    BtnPlay->setCursor(QCursor(Qt::PointingHandCursor));

    BtnPrev=new QPushButton(this);
    BtnPrev->setObjectName(tr("BtnPrev"));
    BtnPrev->setGeometry(,,,);
    BtnPrev->setToolTip(tr("上一首"));
    BtnPrev->setCursor(QCursor(Qt::PointingHandCursor));

    BtnNext=new QPushButton(this);
    BtnNext->setObjectName(tr("BtnNext"));
    BtnNext->setGeometry(,,,);
    BtnNext->setToolTip(tr("下一首"));
    BtnNext->setCursor(QCursor(Qt::PointingHandCursor));

    muteButton=new QPushButton(this);
    muteButton->setObjectName(tr("muteButton"));
    muteButton->setGeometry(,,,);
    muteButton->setToolTip(tr("关闭声音"));
    muteButton->setCursor(QCursor(Qt::PointingHandCursor));

    volumeControl=new QSlider(Qt::Vertical,this);//QSlider(Qt::Vertical,this)创建一个竖直方向的滑动条QSlider控件
    volumeControl->setObjectName(tr("volumeControl"));
    volumeControl->setGeometry(,,,);
    volumeControl->setCursor(QCursor(Qt::PointingHandCursor));
    volumeControl->setRange(,);//设置滑动条控件的最小值和最大值
    volumeControl ->setValue();//设置初值为50；

    seekSlider = new QSlider(Qt::Horizontal,this);//QSlider(Qt::Horizontal,this)创建一个水平方向的滑动条QSlider控件
    seekSlider -> setGeometry(,,,);
    seekSlider->setObjectName(tr("seekSlider"));
    seekSlider -> setCursor(QCursor(Qt::PointingHandCursor));

    addMore = new QPushButton(this);
    addMore -> setGeometry(,,,);
    addMore -> setObjectName(tr("addMore"));
    addMore->setToolTip(tr("添加歌曲"));
    addMore -> setCursor(QCursor(Qt::PointingHandCursor));

    showMge = new QLabel(this);
    showMge -> setGeometry(,,,);
    showMge -> setFont(QFont("Times",,QFont::Bold));//字体使用Times,10号字体，加粗
    QPalette pac;//创建调色板
    pac.setColor(QPalette::WindowText,QColor(,,));
    showMge -> setPalette(pac);

    list = new QListWidget(this);
    list ->setGeometry(,,,);
    list -> setFont(QFont("Times",,QFont::Bold));
    list -> setPalette(pac);
    list ->setStyleSheet("background: rgba(0,0,0,0.1);");

    message = new QLabel(this);
    message -> setGeometry(,,,);
    message -> setFont(QFont("Times",,QFont::Bold));
    message -> setPalette(pac);

    showPro = new QLabel(this);
    showPro -> setGeometry(,,,);
    showPro -> setFont(QFont("Times",,QFont::Bold));
    showPro -> setPalette(pac);
    QTime mov(,,);
    showPro ->setText(mov.toString("mm:ss"));

    showTime = new QLabel(this);
    showTime -> setGeometry(,,,);
    showTime -> setFont(QFont("Times",,QFont::Bold));
    showTime -> setPalette(pac);
    QTime mo(,,);//QTime 提供时间函数给用户使用
    showTime ->setText(mo.toString("mm:ss"));//显示分：秒

    title = new QLabel(this);//设置标题
    title -> setGeometry(,,,);
    title ->setFont(QFont("Times",,QFont::Bold));
    QPalette pa;
    pa.setColor(QPalette::WindowText,QColor(,,));
    title -> setPalette(pa);
    title -> setText("MusicPlayer");

    //信号与槽
    connect(BtnClose, SIGNAL(clicked(bool)), this, SLOT(close()));
    connect(BtnMin, SIGNAL(clicked(bool)), this, SLOT(showMinimized()));
    connect(addMore, SIGNAL(clicked(bool)), this, SLOT(addMoremusic()));
    connect(BtnPlay, SIGNAL(clicked(bool)), this, SLOT(playMusic()));
    connect (BtnPrev,SIGNAL(clicked(bool)), this, SLOT(preMusic()));
    connect(BtnNext, SIGNAL(clicked(bool)), this, SLOT(nextMusic()));
    connect(muteButton, SIGNAL(clicked(bool)), this, SLOT(meteOpen()));
    connect(volumeControl, SIGNAL(sliderMoved(int)), this, SLOT(volumChange(int)));
    connect(player,SIGNAL(positionChanged(qint64)),this,SLOT( positionChange(qint64)));
    connect(playPattern,SIGNAL(clicked(bool)),this,SLOT(musicPlayPattern()));

}

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

 //外部加载qss文件，绘制界面样式
 void Music::init_skin()
 {
     QFile file(":/qss/skin.qss");
     file.open(QFile::ReadOnly);
     this -> setStyleSheet(QObject::tr(file.readAll()));
     file.close();

 }

我的qss代码如下（qss和css的语法几乎一模一样）：

 QPushButton#playPattern:!hover
 {
         border-image: url(:/image/Seq.png);
 }
 QPushButton#playPattern:hover
 {
         border-image: url(:/image/Seq.png);
 }
 QPushButton#playPattern:pressed{
         border-image: url(:/image/Seq.png);
 }
 QPushButton#BtnClose:!hover
 {
         border-image: url(:/image/close.png);
 }
 QPushButton#BtnClose:hover
 {
         border-image: url(:/image/close.png);
 }
 QPushButton#BtnClose:pressed
 {
         border-image: url(:/image/close.png);
 }
 QPushButton#BtnClose:focus{padding:-;}

 QPushButton#addMore
 {
         border-image: url(:/image/addMore.png);

 }

 QPushButton#BtnMin:!hover
 {
         border-image: url(:/image/min.png);
 }
 QPushButton#BtnMin:hover
 {
         border-image: url(:/image/min.png);
 }
 QPushButton#BtnMin:pressed
 {
         border-image: url(:/image/min.png);
 }
 QPushButton#BtnMin:focus{padding:-;}

 QPushButton#BtnPlay:!hover
 {
         border-image: url(:/image/play_hover.png);
 }
 QPushButton#BtnPlay:hover
 {
         border-image: url(:/image/play_hover.png);
 }
 QPushButton#BtnPlay:pressed
 {
         border-image: url(:/image/play_press.png);
 }
 QPushButton#BtnPlay:focus
 {
         padding:-;
 }

 QPushButton#BtnPrev:!hover
 {
         border-image: url(:/image/prev_hover.png);
 }
 QPushButton#BtnPrev:hover
 {
         border-image: url(:/image/prev_hover.png);
 }
 QPushButton#BtnPrev:pressed
 {
         border-image: url(:/image/prev_press.png);
 }
 QPushButton#BtnPrev:focus{padding:-;}

 QPushButton#BtnNext:!hover
 {
         border-image: url(:/image/next_hover.png);
 }
 QPushButton#BtnNext:hover
 {
         border-image: url(:/image/next_hover.png);
 }
 QPushButton#BtnNext:pressed
 {
         border-image: url(:/image/next_press.png);
 }
 QPushButton#BtnNext:focus{padding:-;}

 QPushButton#muteButton:!hover
 {
         border-image: url(:/image/sound.png);
  }
 QPushButton#muteButton:hover
 {
         border-image: url(:/image/sound.png);
 }
 QPushButton#muteButton:pressed
 {
         border-image: url(:/image/sound_close.png);
 }
 QPushButton#muteButton:focus{padding:-;}

 QSlider#volumeControl::groove:Vertical {
         border: 0px solid #bbb;
         background: rgba(,,,0.1);
         width: 4px;
         border-radius: 1px;
 }

 QSlider#volumeControl::sub-page:Vertical {
         background: rgba(,,,0.1);
         border: 0px solid #;
         width: 4px;
         border-radius: 1px;
 }

 QSlider#volumeControl::add-page:Vertical {
         background:url(:/image/progress_sound.bmp);
         border: 0px solid #;
         width: 4px;
         border-radius: 1px;
 }

 QSlider#volumeControl::handle:Vertical {
         border-image:url(:/image/progress_thume.png);
         border: 0px solid #;
         width: 28px;
         height: 28px;
         margin-left:-12px;
         margin-right:-12px;
         margin-top: -12px;
         margin-bottom: -12px;
         border-radius: 4px;
 }

 QSlider#seekSlider::groove:horizontal {
         border-left:-14px solid;
         background: rgba(,,,0.1);
         height: 4px;
         border-radius: 4px;
 }

 QSlider#seekSlider::sub-page:horizontal {
         background:url(:/image/progress.bmp);
         border: 0px solid #;
         height: 4px;
         border-radius: 4px;
 }

 QSlider#seekSlider::add-page:horizontal {
         background: rgba(,,,0.1);
         border: 0px solid #;
         height: 4px;
         border-radius:4px;
 }

 QSlider#seekSlider::handle:horizontal {
         background:url(:/image/progress_thume.png);
         border: 0px solid #;
         width: 28px;
         height: 28px;
         border-left:0px;
         border-right:0px;
         margin-left:2px;
         margin-right:-12px;
         margin-top: -12px;
         margin-bottom: -12px;
         border-radius: 4px;
 }

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