6、Qt Project之音视频播放

音视频播放 

这里简单的制作了一个音乐播放器，播放器的界面设计如下所示：

Step1：这里是界面对应的HTML文件：

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <widget class="QPushButton" name="Play_Puase">
    <property name="geometry">
     <rect>
      <x>120</x>
      <y>160</y>
      <width>31</width>
      <height>31</height>
     </rect>
    </property>
    <property name="text">
     <string>Play</string>
    </property>
   </widget>
   <widget class="QPushButton" name="NextSong">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>150</y>
      <width>81</width>
      <height>27</height>
     </rect>
    </property>
    <property name="text">
     <string>Next Song</string>
    </property>
   </widget>
   <widget class="QLabel" name="label">
    <property name="geometry">
     <rect>
      <x>0</x>
      <y>0</y>
      <width>321</width>
      <height>51</height>
     </rect>
    </property>
    <property name="font">
     <font>
      <pointsize>28</pointsize>
      <italic>true</italic>
      <underline>false</underline>
      <strikeout>false</strikeout>
     </font>
    </property>
    <property name="cursor">
     <cursorShape>BlankCursor</cursorShape>
    </property>
    <property name="text">
     <string>Qt interface Demo!</string>
    </property>
    <property name="alignment">
     <set>Qt::AlignCenter</set>
    </property>
   </widget>
   <widget class="QDial" name="Volume">
    <property name="geometry">
     <rect>
      <x>180</x>
      <y>150</y>
      <width>50</width>
      <height>64</height>
     </rect>
    </property>
    <property name="value">
     <number>50</number>
    </property>
   </widget>
   <widget class="QSlider" name="SongChoose">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>210</y>
      <width>231</width>
      <height>29</height>
     </rect>
    </property>
    <property name="orientation">
     <enum>Qt::Horizontal</enum>
    </property>
   </widget>
   <widget class="QPushButton" name="PrevSong">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>180</y>
      <width>81</width>
      <height>27</height>
     </rect>
    </property>
    <property name="text">
     <string>Prev Song</string>
    </property>
   </widget>
   <widget class="QLabel" name="label_2">
    <property name="geometry">
     <rect>
      <x>0</x>
      <y>50</y>
      <width>171</width>
      <height>51</height>
     </rect>
    </property>
    <property name="font">
     <font>
      <pointsize>22</pointsize>
      <italic>true</italic>
      <underline>false</underline>
      <strikeout>false</strikeout>
     </font>
    </property>
    <property name="cursor">
     <cursorShape>BlankCursor</cursorShape>
    </property>
    <property name="text">
     <string>Music Player</string>
    </property>
    <property name="alignment">
     <set>Qt::AlignCenter</set>
    </property>
   </widget>
   <widget class="QLabel" name="label_3">
    <property name="geometry">
     <rect>
      <x>20</x>
      <y>110</y>
      <width>171</width>
      <height>21</height>
     </rect>
    </property>
    <property name="font">
     <font>
      <pointsize>10</pointsize>
      <italic>true</italic>
      <underline>false</underline>
      <strikeout>false</strikeout>
     </font>
    </property>
    <property name="cursor">
     <cursorShape>BlankCursor</cursorShape>
    </property>
    <property name="text">
     <string>Designed by : mm1994uestc</string>
    </property>
    <property name="alignment">
     <set>Qt::AlignCenter</set>
    </property>
   </widget>
   <widget class="QLabel" name="singer">
    <property name="geometry">
     <rect>
      <x>220</x>
      <y>220</y>
      <width>161</width>
      <height>21</height>
     </rect>
    </property>
    <property name="font">
     <font>
      <pointsize>10</pointsize>
      <italic>true</italic>
      <underline>false</underline>
      <strikeout>false</strikeout>
     </font>
    </property>
    <property name="cursor">
     <cursorShape>BlankCursor</cursorShape>
    </property>
    <property name="text">
     <string>Singer:</string>
    </property>
    <property name="alignment">
     <set>Qt::AlignCenter</set>
    </property>
   </widget>
   <widget class="QLabel" name="title">
    <property name="geometry">
     <rect>
      <x>260</x>
      <y>170</y>
      <width>61</width>
      <height>21</height>
     </rect>
    </property>
    <property name="font">
     <font>
      <pointsize>10</pointsize>
      <italic>true</italic>
      <underline>false</underline>
      <strikeout>false</strikeout>
     </font>
    </property>
    <property name="cursor">
     <cursorShape>BlankCursor</cursorShape>
    </property>
    <property name="text">
     <string>Title:</string>
    </property>
    <property name="alignment">
     <set>Qt::AlignCenter</set>
    </property>
   </widget>
   <widget class="QLabel" name="ArtCover">
    <property name="geometry">
     <rect>
      <x>260</x>
      <y>60</y>
      <width>90</width>
      <height>90</height>
     </rect>
    </property>
    <property name="text">
     <string>    Art_Cover</string>
    </property>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menuBar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>400</width>
     <height>25</height>
    </rect>
   </property>
   <widget class="QMenu" name="menuFile">
    <property name="title">
     <string>File</string>
    </property>
    <addaction name="actionOpenLocalMedia"/>
   </widget>
   <addaction name="menuFile"/>
  </widget>
  <widget class="QToolBar" name="mainToolBar">
   <attribute name="toolBarArea">
    <enum>TopToolBarArea</enum>
   </attribute>
   <attribute name="toolBarBreak">
    <bool>false</bool>
   </attribute>
  </widget>
  <widget class="QStatusBar" name="statusBar"/>
  <action name="actionOpenLocalMedia">
   <property name="text">
    <string>OpenLocalMedia</string>
   </property>
  </action>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>

View Code

这里使用了Qt的metadata的相关模块，需要调用到metadata的库

在MusicPlayer.pro文件中添加如下内容：

QT += core gui multimedia

这样就添加了工程需要的音视频模块multimedia

Step2：我们需要在mainwindow.h头文件中添加每一个按键信号对应的槽函数声明以及工程中使用的多媒体对象的数据结构如下所示（mainwindow.h文件的内容）：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QMediaPlayer>
#include <QMediaPlaylist> #include <QMultimedia> #include <QMediaMetaData> #include <QTimer> namespace Ui { class MainWindow; } class MainWindow : public QMainWindow { Q_OBJECT public: explicit MainWindow(QWidget *parent = 0); ~MainWindow(); private slots: void on_NextSong_clicked(bool checked); //下一首-槽函数声明 void on_PrevSong_clicked(bool checked); // 上一首-槽函数声明 void on_Volume_valueChanged(int value); // 音量改变的槽函数申明 void on_SongChoose_sliderMoved(int position); void on_openlocal_media(); void on_Play_Puase_clicked(bool checked); void on_playProgressUpdate(); void on_MetaDateUpdate(); private: Ui::MainWindow *ui; QMediaPlayer *mediaPlayer; // 多媒体对象变量声明 QMediaPlaylist *localMediaPlaylist; // 多媒体对象列表对象声明 QTimer *progressTimer; // 定时器对象声明 }; #endif // MAINWINDOW_H

Step3：对应的槽函数的实现：

 func1：on_NextSong_clicked   func2：on_PrevSong_clicked   func3：on_Volume_valueChanged   func4：on_SongChoose_sliderMoved   

 func5：on_openlocal_media     func6：on_Play_Puase_clicked    func7：on_playProgressUpdate    func8：on_MetaDateUpdate

void MainWindow::on_NextSong_clicked(bool checked)
{
    qDebug() << "on_NextSong_clicked is pushed";
    this->mediaPlayer->playlist()->next();
}

void MainWindow::on_PrevSong_clicked(bool checked)
{
    qDebug() << "on_PrevSong_clicked is pushed";
    this->mediaPlayer->playlist()->previous();
}

void MainWindow::on_Volume_valueChanged(int value)
{
    qDebug()<< value;
    this->mediaPlayer->setVolume(value);
}

void MainWindow::on_SongChoose_sliderMoved(int position)
{
    qDebug()<< position;
    float percent = (position*1.0)/this->ui->SongChoose->maximum();
    long value = this->mediaPlayer->duration()*percent;
    this->mediaPlayer->setPosition(value);
}

void MainWindow::on_openlocal_media()
{
    QStringList fileNamelist;
    fileNamelist = QFileDialog::getOpenFileNames(this,tr("select local files"),"~/",tr("MP3/MP4 Files(*.mp3 *.mp4);;")); //Read file with Regex Rules.
    if(!fileNamelist.isEmpty())
    {
        qDebug() << fileNamelist;
        this->localMediaPlaylist->clear(); //Clear the PlayList
        foreach (const QString &fileName,fileNamelist) {
            QMediaContent media = QMediaContent(QUrl::fromLocalFile(fileName)); //Add the media into the PlayList
            this->localMediaPlaylist->addMedia(media);
        }
        this->localMediaPlaylist->setCurrentIndex(0); //Set the Current media when program begining
    }else{

    }
    return ;
}

void MainWindow::on_Play_Puase_clicked(bool checked)
{
    qDebug() << "Play or Pause?";
    if(this->mediaPlayer->state() == QMediaPlayer::PlayingState)
    {
        this->mediaPlayer->pause();
    }else
    {
        this->mediaPlayer->setVolume(this->ui->Volume->value()); //Choose current volume to be the current media!
        this->mediaPlayer->play();
    }
}

void MainWindow::on_playProgressUpdate()
{
    long pos = this->mediaPlayer->position();
    long duration = this->mediaPlayer->duration();

    int value = (1.0*pos/duration)*100;

    this->ui->SongChoose->setValue(value);
}

void MainWindow::on_MetaDateUpdate()
{
    QString title,albumArtist;
    QImage coverImage;
    QPixmap pixmap;
    title = this->mediaPlayer->metaData("Title").toString();
    albumArtist = this->mediaPlayer->metaData("AudioCodec").toString();
    coverImage = this->mediaPlayer->metaData("CoverArtImage").value<QImage>();
    if(coverImage.isNull())
    {
        pixmap = QPixmap(":/images/MusicPlayerLogo.jpg");
    }else
    {
        pixmap.convertFromImage(coverImage);
    }

    this->ui->title->setText(title);
    qDebug() << title;
    this->ui->singer->setText(albumArtist);
    qDebug() << albumArtist;
    this->ui->ArtCover->setPixmap(pixmap.scaled(this->ui->ArtCover->size()));
}

View Code

Step4：完成槽函数的实现之后就将对应的型号和槽函数进行连接connect：

connect(this->ui->NextSong,SIGNAL(clicked(bool)),this,SLOT(on_NextSong_clicked())); //Single connect to SLOT
connect(this->ui->PrevSong,SIGNAL(clicked(bool)),this,SLOT(on_PrevSong_clicked()));
connect(this->ui->Volume,SIGNAL(valueChanged(int)),this,SLOT(on_Volume_valueChanged()));
connect(this->ui->SongChoose,SIGNAL(sliderMoved(int)),this,SLOT(on_SongChoose_sliderMoved()));
connect(this->ui->actionOpenLocalMedia,SIGNAL(triggered(bool)),this,SLOT(on_openlocal_media()));
connect(this->ui->Play_Puase,SIGNAL(clicked(bool)),this,SLOT(on_Play_Puase_clicked())); connect(this->progressTimer,SIGNAL(timeout()),this,SLOT(on_playProgressUpdate())); connect(this->mediaPlayer,SIGNAL(metaDataChanged()),this,SLOT(on_MetaDateUpdate()));

Step5：初始化在mainwindow.h头文件中定义的变量：

this->mediaPlayer = new QMediaPlayer(this);
this->localMediaPlaylist = new QMediaPlaylist(this);
this->mediaPlayer->setPlaylist(this->localMediaPlaylist);
this->mediaPlayer->setVolume(50); //Set default Volume Value

this->progressTimer = new QTimer(this);
this->progressTimer->setInterval(100); //100ms
this->progressTimer->start();

完成以上工作即可编译运行整个工程，这就是简单的多媒体播放器的制作。