项目记录：基于QT的简易音乐播放器

thesoulistyoko

已于 2022-08-24 16:07:53 修改

阅读量1.2k

点赞数

分类专栏：项目记录文章标签： qt c++

于 2022-08-14 00:09:14 首次发布

本文链接：https://blog.csdn.net/thesoulistyoko/article/details/126319244

版权

项目记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、功能介绍

1.能够自定义背景图片

2.实现了音乐播放器的最基本功能，即播放与否、切换歌曲及歌单、显示歌曲信息、调节音量、播放模式等

3.根据所选中的框体，更新播放列表及播放顺序

4.从播放列表中删除或添加歌曲

二、功能展示

1.自定义背景

2.添加本地音乐

3.播放的基本功能

4.历史记录

5.从列表中删除歌曲

三、源码

1.widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QMenu>
#include <QMessageBox>
#include <QPixmap>
#include <QFileDialog>
#include <QMediaPlayer>
#include <QMediaPlaylist>
#include <QPainter>
#include <QStyleOption>
#include <QListWidget>
#include <QListWidgetItem>
#include <QString>
namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

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

    //媒体播放初始化
    void media_play_init();
    //重写绘图事件，使背景图生效
    void paintEvent(QPaintEvent *event);

private slots:

    //自动绑定的槽函数
    void on_bt_title_clicked();

    void on_bt_about_clicked();

    void on_bt_skin_clicked();//自定义背景的按钮单击槽函数

    void on_bt_minihua_clicked();//界面最小化

    void on_bt_close_clicked();//关闭界面

    void on_bt_music_mode_clicked();//选择音乐播放模式

    void on_bt_sound_value_clicked();//音量键单击槽函数：初始化时默认隐藏滑块，点击出现滑块，再点击隐藏滑块

    void on_sld_voice_valueChanged(int value);//音量滑块滑动槽函数：用于调节媒体播放音量大小

    void on_bt_add_song_clicked();//添加音乐按钮单击槽函数：弹出文件选择窗口，选择要添加的音乐

    void on_bt_play_clicked();//播放按钮单击槽函数：默认是暂停，开始播放时自动变为播放按钮，再按歌曲暂停

    void on_bt_next_song_clicked();//下一首

    void on_bt_last_song_clicked();//上一首

    void on_sld_song_sliderReleased();//歌曲时长滑块滑动槽函数：通过得到媒体当前播放位置，来设置滑块的值（注意单位的差异）

    void on_bt_del_song_clicked();//删除音乐按钮的单击槽函数

    void on_bt_local_musci_clicked();//本地音乐按钮的单击槽函数：从容器中切换界面

    void on_bt_history_music_clicked();//历史播放按钮的单击槽函数：从容器中切换界面

    void on_listWidget_history_itemDoubleClicked(QListWidgetItem *item);//双击历史播放窗口中的主题item槽函数：双击歌曲即开始播放

    void on_listWidget_local_itemDoubleClicked(QListWidgetItem *item);//双击本地音乐窗口中的主题item槽函数：双击歌曲即开始播放

    //自己定义的槽函数
    void set_song_duration(qint64);//设置显示歌曲总时长

    void set_song_position(qint64);//设置显示歌曲当前时长 及 滑动当前位置

    void set_media_list_index(int);//设置媒体列表(listWidget_local)的下标变化



private:
    Ui::Widget *ui;

    //音乐播放模式选择所用到的菜单类
    QMenu *music_mode_change;
    //切换背景时所用到的菜单类
    QMenu *music_skin_change;

    //所选中的音乐文件列表
    QStringList filelist;

    QMediaPlayer *player;
    QMediaPlaylist *playlist;

    //用于显示歌曲的总时长
    QString  song_duration;
    //用于显示歌曲的当前时长
    QString song_position;
};

#endif // WIDGET_H

2.widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->setWindowTitle("YoKo音乐播放器");
    //先隐藏音量键
    ui->sld_voice->hide();
    //初始化界面的第一个容器，要显示为本地音乐的listWidget
    ui->stackedWidget->setCurrentIndex(1);
    //初始化界面的背景，选择为默认背景
    QString fileName = ":/image/background/VCG211275464206(1).png";
    setStyleSheet(QString("QWidget#Widget{ border-image:url(%0) }").arg(fileName));

    media_play_init();//媒体播放器初始化


}

//重写绘画时间，使背景图显示
void Widget::paintEvent(QPaintEvent *event){
    QStyleOption opt;
    opt.init(this);
    QPainter p(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
    QWidget::paintEvent(event);
}
//媒体播放器初始化：内部包含了媒体和媒体列表的初始化，以及连接了媒体所产生信号的各个槽函数
void Widget::media_play_init(){
    player = new QMediaPlayer(this);
    playlist = new QMediaPlaylist(this);

    //清空播放器列表
    playlist->clear();
    //设置音乐播放器的列表为playlist,即获取播放列表
    player->setPlaylist(playlist);
    //设置播放模式
    playlist->setPlaybackMode(QMediaPlaylist::Loop);

    ui->bt_play->setChecked(false);

    //将媒体duration信号的改变，连接到槽函数，用该信号传过来的值，改变QLabel的文本
    connect(player,SIGNAL(durationChanged(qint64)),this,SLOT(set_song_duration(qint64)));
    //将媒体position信号的改变，连接到槽函数，用该信号传过来的值，改变QLabel的文本
    connect(player,SIGNAL(positionChanged(qint64)),this,SLOT(set_song_position(qint64)));
    //将playlist播放列表，当前下标变化的信号，传出去，让listWidget_local媒体列表设置当前下标
    connect(playlist,SIGNAL(currentIndexChanged(int)),this,SLOT(set_media_list_index(int)));
}


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


void Widget::on_bt_title_clicked()
{
    /*QMessageBox title_box;
    title_box.setText("音乐播放器......音乐播放器\n音乐播放器......音乐播放器\n");
    title_box.exec();*/
    QMessageBox::about(this,"播放器信息",
                       "YoKo播放器 | 一款精致小巧又清新的音乐播放器\n"
                       "著作人：小邱同学\n"
                       "版本号：1.0\n"
                       "功能特点：支持车载蓝牙音乐播放\n"
                       );
}

void Widget::on_bt_about_clicked()
{
    QMessageBox::about(this,"关于",
                       "YoKo播放器 | 一款精致小巧又清新的音乐播放器\n"
                       "著作人：小邱同学\n"
                       "版本号：1.0\n"
                       "希望小何播放器能给您带来享受音乐的快乐\n"
                       );
}
//自定义背景的按钮单击槽函数
void Widget::on_bt_skin_clicked()
{
    QAction *default_action = new QAction("返回默认背景");
    QAction *custom_action = new QAction("自定义背景");

    //设置默认背景
    connect(default_action,&QAction::triggered,this,[=](){
        QString fileName = ":/image/background/VCG211275464206(1).png";
        setStyleSheet(QString("QWidget#Widget{ border-image:url(%0) }").arg(fileName));
    });
    //自定义背景
    connect(custom_action,&QAction::triggered,this,[=](){
        QString filter = "png文件(*.png);;所有文件(*.*)";
        QString fileName = QFileDialog::getOpenFileName(this,"选择背景","D:\\Qt\\hqyj_project\\day8\\my_music\\image\\background",filter);
        setStyleSheet(QString("QWidget#Widget{ border-image:url(%0) }").arg(fileName));
    });

    music_skin_change = new QMenu(this);
    music_skin_change->addAction(default_action);
    music_skin_change->addAction(custom_action);
    music_skin_change->exec(QCursor::pos());
}
//界面最小化
void Widget::on_bt_minihua_clicked()
{
    showMinimized();
}
//关闭界面
void Widget::on_bt_close_clicked()
{
    this->close();
}
//选择音乐播放模式
void Widget::on_bt_music_mode_clicked()
{
    QAction *order_action = new QAction(QIcon(":/image/image/loop2.png"),"顺序播放");
    QAction *loop_action = new QAction(QIcon(":/image/image/loop-one2.png"),"单曲循环");
    QAction *random_action = new QAction(QIcon(":/image/image/random2.png"),"随机播放");


    //顺序播放
    connect(order_action,&QAction::triggered,this,[=](){
        ui->bt_music_mode->setIcon(QIcon(":/image/image/loop2.png"));
        ui->bt_music_mode->setToolTip("顺序播放");
        playlist->setPlaybackMode(QMediaPlaylist::Loop);
    });

    //单曲循环
    connect(loop_action,&QAction::triggered,this,[=](){
        ui->bt_music_mode->setIcon(QIcon(":/image/image/loop-one2.png"));
        ui->bt_music_mode->setToolTip("单曲循环");
        playlist->setPlaybackMode(QMediaPlaylist::CurrentItemInLoop);
    });

    //随机播放
    connect(random_action,&QAction::triggered,this,[=](){
        ui->bt_music_mode->setIcon(QIcon(":/image/image/random2.png"));
        ui->bt_music_mode->setToolTip("随机播放");
        playlist->setPlaybackMode(QMediaPlaylist::Random);
    });

    music_mode_change = new QMenu(this);
    music_mode_change->addAction(order_action);
    music_mode_change->addAction(loop_action);
    music_mode_change->addAction(random_action);
    music_mode_change->exec(QCursor::pos());

}
//音量键单击槽函数：初始化时默认隐藏滑块，点击出现滑块，再点击隐藏滑块
void Widget::on_bt_sound_value_clicked()
{
    if(ui->sld_voice->isHidden())
        ui->sld_voice->show();
    else
        ui->sld_voice->hide();
}
//音量滑块滑动槽函数：用于调节媒体播放音量大小
void Widget::on_sld_voice_valueChanged(int value)
{
    player->setVolume(value);
}
//添加音乐按钮单击槽函数：弹出文件选择窗口，选择要添加的音乐
void Widget::on_bt_add_song_clicked()
{
    QString filter = "音频文件(*.mp3 *.wav *.wma)mp3文件(*.mp3);;wav文件(*.wav);;wma文件(*.wma);;所有文件(*.*)";
    filelist = QFileDialog::getOpenFileNames(this,"选择音频文件","D:\\Qt\\hqyj_project\\day8\\MP3",filter);
    for(int i = 0; i < filelist.length(); i++){
        QString path = filelist[i];
        playlist->addMedia(QUrl::fromLocalFile(path));
    }
    //将文件列表加入listWidget中
    ui->listWidget_local->addItems(filelist);

    ui->bt_play->setChecked(true);
}
//播放按钮单击槽函数：默认是暂停，开始播放时自动变为播放按钮，再按歌曲暂停
void Widget::on_bt_play_clicked()
{
    if(QMediaPlayer::PlayingState == player->state()){
        player->pause();
        ui->bt_play->setIcon(QIcon(":/image/image/play2.png"));
    }
    else if(QMediaPlayer::PausedState == player->state()){
        player->setVolume(50);
        player->play();
        ui->bt_play->setIcon(QIcon(":/image/image/pause2.png"));
        //ui->listWidget_history->addItem();
    }
}
//下一首
void Widget::on_bt_next_song_clicked()
{
    player->stop();
    int count = playlist->mediaCount();
    if(0 == count)
        return;
    else{
        playlist->next();
        player->play();
    }
}
//上一首
void Widget::on_bt_last_song_clicked()
{
    player->stop();
    int count = playlist->mediaCount();
    if(0 == count)
        return;
    else{
        playlist->previous();
        player->play();
    }
}
//歌曲时长滑块滑动槽函数：通过得到媒体当前播放位置，来设置滑块的值（注意单位的差异）
void Widget::on_sld_song_sliderReleased()
{
    //因为是以ms为单位的
    player->setPosition(ui->sld_song->value()*1000);
}
//通过媒体发送的信号，设置歌曲的总时间信息显示
void Widget::set_song_duration(qint64 duration){
    ui->sld_song->setRange(0,duration/1000);
    int second = duration / 1000;
    int minute = second / 60;
    second %= 60;
\
    if(minute >= 10)
        song_duration = QString::number(minute, 10);
    else
        song_duration = "0" + QString::number(minute, 10);

    if(second >= 10)
        song_duration = song_duration + ":" + QString::number(second, 10);
    else
        song_duration = song_duration + ":" + "0" + QString::number(second, 10);

    //qDebug() << song_duration;
    ui->label_duration ->setText(song_duration);

}
//通过媒体发送的信号，设置歌曲的当前时间实时显示
void Widget::set_song_position(qint64 position){
    if(!ui->sld_song->isSliderDown()) // 如果滑块没有按下
            ui->sld_song->setValue(position / 1000); // 设置滑块的位置

    //设置标签中的值
    int second = position / 1000;
    int minute = second / 60;
    second %= 60;

    if(minute >= 10)
        song_position = QString::number(minute, 10);
    else
        song_position = "0" + QString::number(minute, 10);

    if(second >= 10)
        song_position = song_position + ":" + QString::number(second, 10) + "/";
    else
        song_position = song_position + ":0" + QString::number(second, 10) + "/";

    ui->label_position->setText(song_position);
}
//删除音乐的单击槽函数
void Widget::on_bt_del_song_clicked()
{
    QListWidgetItem *deleteItem = ui->listWidget_local->takeItem(0);
    ui->listWidget_local->removeItemWidget(deleteItem);
    delete deleteItem;
}
//本地音乐按钮的单击槽函数：从容器中切换界面
void Widget::on_bt_local_musci_clicked()
{
    ui->stackedWidget->setCurrentIndex(1);
}
//历史播放按钮的单击槽函数：从容器中切换界面
void Widget::on_bt_history_music_clicked()
{
    ui->stackedWidget->setCurrentIndex(0);
}
//槽函数：通过媒体播放列表下标的变化，设置当前界面的下标
void Widget::set_media_list_index(int index){
    if(-1 == index)
        return;
    ui->listWidget_local->setCurrentRow(index);
}
//双击本地音乐窗口中的主题item槽函数：双击歌曲即开始播放
void Widget::on_listWidget_local_itemDoubleClicked(QListWidgetItem *item)
{
    player->stop();
    //更新播放列表的下标，让媒体的播放列表不变的同时，还能实现切换功能
    playlist->setCurrentIndex(ui->listWidget_local->row(item));
    //播放
    player->play();
    player->setVolume(50);
    //改变暂停图标，使UI能让用户知道当前歌曲状态
    ui->bt_play->setIcon(QIcon(":/image/image/pause2.png"));
    //显示歌曲信息
    ui->label_song_info->setText(item->text());
    //添加歌曲信息到历史记录
    ui->listWidget_history->addItem(item->text());
}
//双击历史播放窗口中的主题item槽函数：双击歌曲即开始播放
void Widget::on_listWidget_history_itemDoubleClicked(QListWidgetItem *item)
{
    player->stop();
    //更新播放列表的下标，让媒体的播放列表不变的同时，还能实现切换功能
    playlist->setCurrentIndex(ui->listWidget_local->row(item));
    //播放
    player->play();
    player->setVolume(50);
    //改变暂停图标，使UI能让用户知道当前歌曲状态
    ui->bt_play->setIcon(QIcon(":/image/image/pause2.png"));
    //显示歌曲信息
    ui->label_song_info->setText(item->text());
}

3.各按钮美化（通过UI的styleSheet直接设置）

QPushButton
{
color:rgb(255,255,255);
border-radius:0px;
background-color: rgba(255, 255, 255,0);
background-repeat:no-repeat;
border:none;
background-position:center center;
}
QPushButton:hover{
	background-color: rgb(255, 255, 255,100);
}
QPushButton:pressed{
background-color: rgba(95, 95, 95,100);
border-color:rgba(255,255,255,30);
border-style:inset;
color:rgb(255, 255, 255);
}