音視頻播放
這里簡單的制作了一個音樂播放器，播放器的界面設計如下所示：
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>
這里使用了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())); }
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();
完成以上工作即可編譯運行整個工程，這就是簡單的多媒體播放器的制作。