用Qt写一个简单的音乐播放器（三）：增加界面（播放跳转与音量控制）

一、前言

在用Qt写一个简单的音乐播放器（一）：使用QMediaPlayer播放音乐中，我们已经知道如何去使用QMediaPlayer播放音乐。
在用Qt写一个简单的音乐播放器（二）：增加界面（开始和暂停音乐)中，我们增加了播放音乐/暂停音乐的按钮。
不论是音频还是视频的播放，都是有进度控制的，我们可以拖动滑动条，到指定位置播放，并且播放音频或者视频的音量我们也可以自由调节，第三篇我们就来说一说，播放控制和音量控制。

二、滑动条（Slider）

滑动条（Slider）是一个很常见的控件，我们可以看到在控件的选择栏中，分别有垂直和水平两种Slider，而通常我们把水平Slider用来控制播放，垂直的用来控制音量，所以为了编程方便，我把这两个控件分别重命名为hSliderPlayProgress(水平滑动条，作用是播放控制)、vSliderVolume(垂直滑动条，作用是控制音量)。

我们播放视频或者音频，一般都有个初始声音大小吧，我在这里先设置成50，注意这里只是，将垂直滑动条的初始值设置成50，目的是为了与代码中的音量50保持一致。

三、代码

1.跳转播放

选中水平的Slider，右键选择转到槽，然后选择SliderMoved（int）点击OK。

SliderMoved的这个槽对应的是，我们拖动滑块，所要产生的事件。
所以在这个槽中写上代码，就可以进行跳转播放了

void MainWindow::on_hSliderPlayProgress_sliderMoved(int position)
{
    m_mediaPlayer.setPosition(m_mediaPlayer.duration()*position/100);
}

其中：
m_mediaPlayer.duration()：音频文件的总帧数（当然你理解成时长也可以）
position：是当前滑动条的位置，默认滑动条的总长度是0到99。
m_mediaPlayer.duration()*position/100：音频文件的第多少帧。
m_mediaPlayer.setPosition():设置从哪一帧开始播放。

2.播放进度

与3.1跳转播放相比，这个可以理解为逆向的一个过程。
跳转播放：界面滑动条发出信号作用到音频播放；
播放进度：音频播放发出信号作用于界面滑动条；
试想如果我们不停的发出信号，作用于界面，这是一个很浪费资源的事情。
所以，这里我加了一个定时器。
首先来看一下 mainwindow.h 文件：

首先在mainwindow.h文件中，我们需要加入三行代码：
#include // 包含定时器头文件
void setSliderValue(); // 声明设置滑块值得槽函数
QTimer *timer; // 定时器
mainwindow.h文件完整代码如下图

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QtMultimedia/QMediaPlayer> // 包含头文件
#include <QTimer>
namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private slots:
    void on_btnPlay_clicked();

    void on_btnPause_clicked();

    void on_hSliderPlayProgress_sliderMoved(int position);

    void setSliderValue();

private:
    Ui::MainWindow *ui;
    QMediaPlayer m_mediaPlayer; // 实例化对象
    QTimer *timer; //定时器
};

#endif // MAINWINDOW_H

现在我们来看一下mainwindow.cpp 文件怎么写。

如图所示：也是有三处代码需要来写：
1.初始化定时器，这里设置的为2s中定时器会发出一次信号。
2.实现我们刚刚声明的setSliderValue（）槽函数
3.将信号与槽连接，其实就相当于每两秒钟执行一次槽函数。
完整mainwindow.cpp 代码如下：

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    timer = new QTimer();
    timer->setInterval(2000);
    timer->start();
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_btnPlay_clicked()
{
    if(QMediaPlayer:: PausedState != m_mediaPlayer.state()){
        m_mediaPlayer.setVolume(50);
        m_mediaPlayer.setMedia(QUrl::fromLocalFile("D:\\music\\BIGBANG - LOSER (Live).mp3"));
    }
    m_mediaPlayer.play();
    connect(timer, SIGNAL(timeout()), this, SLOT(setSliderValue()));
}

void MainWindow::on_btnPause_clicked()
{
    if(QMediaPlayer:: PlayingState == m_mediaPlayer.state()){
        m_mediaPlayer.pause();
    }
}

void MainWindow::on_hSliderPlayProgress_sliderMoved(int position)
{
    m_mediaPlayer.setPosition(m_mediaPlayer.duration()*position/100);
}
void MainWindow::setSliderValue()
{
    ui->hSliderPlayProgress->setValue(m_mediaPlayer.position()*100/m_mediaPlayer.duration());
}

3.控制音量

在.ui 设计界面中，选择垂直Slider，右键转到槽，选择SliderMoved(int)，点击OK；

SliderMoved的这个槽对应的是，我们拖动滑块，所要产生的事件。
所以在这个槽中写上代码，就可以控制音量大小了：

如上图所示：
position：滑动条的位置
由于滑动条默认的值是0到99与 m_mediaPlayer.setVolume()函数一致
所以我们不需要做任何的转换，直接在函数中传position就可以了。
完整mainwindow.cpp 代码如下：

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    timer = new QTimer();
    timer->setInterval(2000);
    timer->start();
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_btnPlay_clicked()
{
    if(QMediaPlayer:: PausedState != m_mediaPlayer.state()){
        m_mediaPlayer.setVolume(50);
        m_mediaPlayer.setMedia(QUrl::fromLocalFile("D:\\music\\BIGBANG - LOSER (Live).mp3"));
    }
    m_mediaPlayer.play();
    connect(timer, SIGNAL(timeout()), this, SLOT(setSliderValue()));
}

void MainWindow::on_btnPause_clicked()
{
    if(QMediaPlayer:: PlayingState == m_mediaPlayer.state()){
        m_mediaPlayer.pause();
    }
}

void MainWindow::on_hSliderPlayProgress_sliderMoved(int position)
{
    m_mediaPlayer.setPosition(m_mediaPlayer.duration()*position/100);
}
void MainWindow::setSliderValue()
{
    ui->hSliderPlayProgress->setValue(m_mediaPlayer.position()*100/m_mediaPlayer.duration());
}

void MainWindow::on_vSliderVolume_sliderMoved(int position)
{
    m_mediaPlayer.setVolume(position);
}

四、效果

如图所示，简单界面只实现功能，暂时不做布局，所以丑是肯定丑了点，但是功能都有。
点击PLay播放
点击Pause暂停
水平滑块显示播放进度并可以拖动滑块跳转播放
垂直滑块显示当前音量并可以拖动滑块控制音量

五、拓展

目前只是实现了一首歌曲的播放，那么多首歌曲呢？如何选择歌曲播放呢？常见的下一首和上一曲功能呢？
敬请期待：用Qt写一个简单的音乐播放器（四）：歌曲选择。
用Qt写一个简单的音乐播放器（四）：歌曲浏览、上一曲、下一曲