学期期末课设做一个本地的音乐播放器于是我写了这个播放器。
该播放器实现了添加本地音频,播放、暂停音乐,上一首,下一首播放,双击音乐列表播放所点击音乐,调节音量、语速,获取音乐播放进度条。两个调节音量的进度条都做了CSS样式表改变,如下图所示。
播放器页面: ![](https://img-blog.csdnimg.cn/5558a9b23bc24a7388bc2dd7302d1a0e.png)
进度条所示:
时间进度条样式表:
QSlider::groove:horizontal {
border: 0px solid #bbb;
border-radius: 4px;
}
QSlider::sub-page:horizontal {
background: rgb(218,223,234);
border-radius: 0px;
margin-top: 8px;
margin-bottom: 9px;
}
QSlider::add-page:horizontal {
background: rgb(88,93,105);
border: 0px solid #777;
border-radius: 2px;
margin-top: 8px;
margin-bottom: 9px;
}
QSlider::handle:horizontal {
background: rgb(255,255,255);
border: 1px solid rgba(102,102,102,102);
width: 8px;
height: 8px;
border-radius: 5px;
margin-top: 2px;
margin-bottom: 2px;
}
QSlider::handle:horizontal:hover {
background: rgb(54,143,255);
border: 1px solid rgba(102,102,102,102);
border-radius: 5px;
}
QSlider::sub-page:horizontal:disabled {
background: #bbb;
border-color: #999;
}
QSlider::add-page:horizontal:disabled {
background: rgb(88,93,105);
border-color: #999;
}
QSlider::handle:horizontal:disabled {
background: rgb(88,93,105);
border: 0px solid #aaa;
border-radius: 4px;
}
音量样式表:
QSlider
{
background-color:qlineargradient(spread:reflect, x1:1, y1:1, x2:1, y2:0, stop:0 rgba(0, 0, 0, 255), stop:0.232955 rgba(89, 0, 0, 255), stop:0.4375 rgba(159, 0, 0, 255), stop:0.653409 rgba(255, 0, 0, 255));/*控件整体背景颜色*/
padding-top: 15px; /*上面端点离顶部的距离*/
padding-bottom: 15px;
border-radius: 5px; /*外边框矩形倒角*/
}
QSlider::add-page:vertical
{
background-color: #FFFFFF;/*槽颜色*/
width:5px;
border-radius: 2px;
}
QSlider::sub-page:vertical
{
background-color: #7A7B79;
width:5px;
border-radius: 2px;
}
QSlider::groove:vertical
{
background:transparent;
width:6px;
}
QSlider::handle:vertical
{
height: 14px;
width: 14px;
margin: 0px -4px 0px -4px;
border-radius: 7px;
background: white;
}
整个Ui界面控件使用表:
Ui界面代码:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<widget name="__qt_fake_top_level">
<widget class="QListWidget" name="musiclist">
<property name="geometry">
<rect>
<x>10</x>
<y>290</y>
<width>211</width>
<height>251</height>
</rect>
</property>
<property name="styleSheet">
<string notr="true">QListView {
outline: none;
}
#musiclist::item {
background-color: #ffffff;
color: #000000;
border: transparent;
border-bottom: 1px solid #dbdbdb;
padding: 8px;
}
#musiclist::item:hover {
background-color: #f5f5f5;
}
#musiclist::item:selected {
border-left: 5px solid #777777;
}</string>
</property>
</widget>
<widget class="QPushButton" name="last">
<property name="geometry">
<rect>
<x>290</x>
<y>480</y>
<width>91</width>
<height>61</height>
</rect>
</property>
<property name="font">
<font>
<pointsize>40</pointsize>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
<property name="styleSheet">
<string notr="true">QPushButton{
background-color: transparent;
border:none;
}</string>
</property>
<property name="text">
<string>◀◀</string>
</property>
</widget>
<widget class="QCheckBox" name="checkBox">
<property name="geometry">
<rect>
<x>700</x>
<y>460</y>
<width>101</width>
<height>31</height>
</rect>
</property>
<property name="font">
<font>
<pointsize>15</pointsize>
</font>
</property>
<property name="text">
<string>静音</string>
</property>
</widget>
<widget class="QPlainTextEdit" name="now">
<property name="geometry">
<rect>
<x>320</x>
<y>20</y>
<width>351</width>
<height>41</height>
</rect>
</property>
<property name="font">
<font>
<pointsize>10</pointsize>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
<property name="styleSheet">
<string notr="true">QPlainTextEdit{
background-color: transparent;
border:none;
}</string>
</property>
</widget>
<widget class="QPushButton" name="addmusic">
<property name="geometry">
<rect>
<x>50</x>
<y>30</y>
<width>111</width>
<height>31</height>
</rect>
</property>
<property name="font">
<font>
<family>Microsoft YaHei</family>
<pointsize>9</pointsize>
<weight>3</weight>
<italic>false</italic>
<bold>false</bold>
</font>
</property>
<property name="styleSheet">
<string notr="true">QPushButton{
background-color: rgba(54, 143, 255, 1);
font: 25 9pt "Microsoft YaHei";
color: rgb(255, 255, 255);
border-radius:7px;
}</string>
</property>
<property name="text">
<string>添加本地音频</string>
</property>
</widget>
<widget class="QLabel" name="image">
<property name="geometry">
<rect>
<x>310</x>
<y>80</y>
<width>300</width>
<height>300</height>
</rect>
</property>
<property name="text">
<string/>
</property>
</widget>
<widget class="QSlider" name="sound">
<property name="geometry">
<rect>
<x>720</x>
<y>120</y>
<width>41</width>
<height>241</height>
</rect>
</property>
<property name="font">
<font>
<weight>50</weight>
<bold>false</bold>
</font>
</property>
<property name="styleSheet">
<string notr="true"> QSlider
{
background-color:qlineargradient(spread:reflect, x1:1, y1:1, x2:1, y2:0, stop:0 rgba(0, 0, 0, 255), stop:0.232955 rgba(89, 0, 0, 255), stop:0.4375 rgba(159, 0, 0, 255), stop:0.653409 rgba(255, 0, 0, 255));/*控件整体背景颜色*/
padding-top: 15px; /*上面端点离顶部的距离*/
padding-bottom: 15px;
border-radius: 5px; /*外边框矩形倒角*/
}
QSlider::add-page:vertical
{
background-color: #FFFFFF;/*槽颜色*/
width:5px;
border-radius: 2px;
}
QSlider::sub-page:vertical
{
background-color: #7A7B79;
width:5px;
border-radius: 2px;
}
QSlider::groove:vertical
{
background:transparent;
width:6px;
}
QSlider::handle:vertical
{
height: 14px;
width: 14px;
margin: 0px -4px 0px -4px;
border-radius: 7px;
background: white;
}
</string>
</property>
<property name="maximum">
<number>100</number>
</property>
<property name="orientation">
<enum>Qt::Vertical</enum>
</property>
</widget>
<widget class="QLabel" name="name">
<property name="geometry">
<rect>
<x>10</x>
<y>4</y>
<width>161</width>
<height>21</height>
</rect>
</property>
<property name="text">
<string/>
</property>
</widget>
<widget class="QSlider" name="time">
<property name="geometry">
<rect>
<x>290</x>
<y>410</y>
<width>341</width>
<height>22</height>
</rect>
</property>
<property name="styleSheet">
<string notr="true">QSlider::groove:horizontal {
border: 0px solid #bbb;
border-radius: 4px;
}
QSlider::sub-page:horizontal {
background: rgb(218,223,234);
border-radius: 0px;
margin-top: 8px;
margin-bottom: 9px;
}
QSlider::add-page:horizontal {
background: rgb(88,93,105);
border: 0px solid #777;
border-radius: 2px;
margin-top: 8px;
margin-bottom: 9px;
}
QSlider::handle:horizontal {
background: rgb(255,255,255);
border: 1px solid rgba(102,102,102,102);
width: 8px;
height: 8px;
border-radius: 5px;
margin-top: 2px;
margin-bottom: 2px;
}
QSlider::handle:horizontal:hover {
background: rgb(54,143,255);
border: 1px solid rgba(102,102,102,102);
border-radius: 5px;
}
QSlider::sub-page:horizontal:disabled {
background: #bbb;
border-color: #999;
}
QSlider::add-page:horizontal:disabled {
background: rgb(88,93,105);
border-color: #999;
}
QSlider::handle:horizontal:disabled {
background: rgb(88,93,105);
border: 0px solid #aaa;
border-radius: 4px;
}</string>
</property>
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
</widget>
<widget class="QPlainTextEdit" name="plainTextEdit">
<property name="geometry">
<rect>
<x>10</x>
<y>70</y>
<width>211</width>
<height>191</height>
</rect>
</property>
<property name="styleSheet">
<string notr="true">QPlainTextEdit{
background-color : rgb(255, 255, 255)
border:none;
}</string>
</property>
</widget>
<widget class="QLabel" name="label">
<property name="geometry">
<rect>
<x>440</x>
<y>440</y>
<width>91</width>
<height>31</height>
</rect>
</property>
<property name="font">
<font>
<family>Agency FB</family>
<pointsize>10</pointsize>
</font>
</property>
<property name="text">
<string/>
</property>
</widget>
<widget class="QPushButton" name="start">
<property name="geometry">
<rect>
<x>420</x>
<y>480</y>
<width>91</width>
<height>61</height>
</rect>
</property>
<property name="font">
<font>
<pointsize>40</pointsize>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
<property name="styleSheet">
<string notr="true">QPushButton{
background-color: transparent;
border:none;
}</string>
</property>
<property name="text">
<string>▷</string>
</property>
</widget>
<widget class="QPushButton" name="next">
<property name="geometry">
<rect>
<x>550</x>
<y>480</y>
<width>91</width>
<height>61</height>
</rect>
</property>
<property name="font">
<font>
<pointsize>40</pointsize>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
<property name="styleSheet">
<string notr="true">QPushButton{
background-color: transparent;
border:none;
}</string>
</property>
<property name="text">
<string>▶▶</string>
</property>
</widget>
<widget class="QLineEdit" name="volume">
<property name="geometry">
<rect>
<x>690</x>
<y>510</y>
<width>101</width>
<height>31</height>
</rect>
</property>
<property name="font">
<font>
<pointsize>10</pointsize>
</font>
</property>
<property name="styleSheet">
<string notr="true">QLineEdit{
background-color: transparent;
border:none;
}</string>
</property>
<property name="text">
<string/>
</property>
</widget>
<widget class="QDoubleSpinBox" name="doubleSpinBox">
<property name="geometry">
<rect>
<x>700</x>
<y>410</y>
<width>71</width>
<height>31</height>
</rect>
</property>
<property name="font">
<font>
<weight>50</weight>
<bold>false</bold>
</font>
</property>
<property name="singleStep">
<double>0.500000000000000</double>
</property>
</widget>
</widget>
<resources/>
</ui>
music.cpp
#include "music.h"
#include "ui_music.h"
#include<QFileDialog>
#include<QDir>
#include<QFile>
#include <QtMultimedia/QMediaPlayer>
#include <QTimer>
#include<QTime>
#include<QPixmap>
#include<QPointer>
#include<QPropertyAnimation>
#include<QBitmap>
#include<QMovie>
#include<QMovie>
#include<QPainter>
Music::Music(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::Music)
{
ui->setupUi(this);
QFile uname("E:/QT5.99/Code/week12/ClassExer/uname.txt");
bool ok = uname.open(QIODevice::ReadOnly | QIODevice::Text);
if(ok){
QString name = uname.readAll();
this->ui->name->setText("当前用户为:" + name);
uname.close();
}
uname.remove();
player = new QMediaPlayer(this);
playlist = new QMediaPlaylist(this);
playlist->setPlaybackMode(QMediaPlaylist::Loop);//设置循环模式
player->setPlaylist(playlist);//获取将播放列表要播放的文件
this->ui->sound->setValue(0);
this->ui->volume->setText("音量为:0");
this->ui->doubleSpinBox->setValue(1);
player->setVolume(0);
this->ui->musiclist->hide();
this->ui->plainTextEdit->hide();
connect(player,SIGNAL(positionChanged(qint64)),this,SLOT(onPositionChanged(qint64)));
connect(player,SIGNAL(durationChanged(qint64)),this,SLOT(onDurationChanged(qint64)));
}
Music::~Music()
{
delete ui;
}
void Music::on_addmusic_clicked()
{
QString curpash = QDir::currentPath();
QString dlgtitle = "选择音频文件";
QString filter="mp3文件(*.mp3);;所有文件(*.*)";
filelist = QFileDialog::getOpenFileNames(this,dlgtitle,curpash,filter);
if(filelist.count() < 1)
{
return;
}
for(int i=0; i<filelist.count(); i++)
{
QString aFile = filelist.at(i);
playlist->addMedia(QUrl::fromLocalFile(aFile));
QFileInfo fileInfo(aFile);
this->ui->musiclist->show();
this->ui->plainTextEdit->show();
ui->musiclist->addItem(fileInfo.fileName()); //用于显示
ui->plainTextEdit->appendPlainText(filelist.at(i)); //用于显示
}
if(player->state()!=QMediaPlayer::PlayingState)
{
playlist->setCurrentIndex(0);
}
}
void Music::on_start_clicked()
{
if(m_IsPause == 't')//f 为播放
{
this->ui->start->setText("▷");
m_IsPause = 'f';
player->pause();
return;
}
this->ui->start->setText("||");
m_IsPause = 't';
M_Now = playlist->currentIndex();
QString s1 = filelist.at(M_Now);
QString s2 = "E:/QT5.99/Code/week12/build-ClassExer-Desktop_Qt_5_9_9_MinGW_32bit-Debug/";
QString s3 = s1.mid(s2.length(),s1.length() - s2.length());
QString s4 = ".mp3";
QString s5 = s3.mid(0,s3.length()-s4.length());
ui->now->setPlainText("当前正在播放:" + s5);
player->play();
circleImage(s2+s5+".png");
}
void Music::on_sound_valueChanged(int value)
{
int a = this->ui->sound->value();
player->setVolume(a);
QString s = "音量为:";
QString s2 = s + QString::number(a);
this->ui->volume->setText(s2);
}
void Music::on_checkBox_toggled(bool checked)
{
if(checked){
m_originalVolume = ui->sound->value();
this->ui->sound->setValue(0);
this->ui->volume->setText("音量为:0");
}else{
ui->sound->setValue(m_originalVolume);
}
}
void Music::on_last_clicked()
{
M_Now = playlist->currentIndex();
M_Sum = playlist->mediaCount();
if (M_Now == 0) {
M_Now = M_Sum - 1;
} else if (M_Now == M_Sum) {
M_Now = 0;
} else {
M_Now--;
}
this->ui->start->setText("||");
playlist->setCurrentIndex(M_Now);
QString s1 = filelist.at(M_Now);
QString s2 = "E:/QT5.99/Code/week12/build-ClassExer-Desktop_Qt_5_9_9_MinGW_32bit-Debug/";
QString s3 = s1.mid(s2.length(),s1.length() - s2.length());
QString s4 = ".mp3";
QString s5 = s3.mid(0,s3.length()-s4.length());
ui->now->setPlainText("当前正在播放:"+s5);
player->play();
circleImage(s2+s5+".png");
}
void Music::on_next_clicked()
{
M_Now = playlist->currentIndex();
M_Sum = playlist->mediaCount();
if (M_Now == M_Sum - 1) {
M_Now = 0;
} else if (M_Now < M_Sum - 1) {
M_Now++;
} else {
M_Now = 0;
}
this->ui->start->setText("||");
playlist->setCurrentIndex(M_Now);
QString s1 = filelist.at(M_Now);
QString s2 = "E:/QT5.99/Code/week12/build-ClassExer-Desktop_Qt_5_9_9_MinGW_32bit-Debug/";
QString s3 = s1.mid(s2.length(),s1.length() - s2.length());
QString s4 = ".mp3";
QString s5 = s3.mid(0,s3.length()-s4.length());
ui->now->setPlainText("当前正在播放:"+s5);
player->play();
circleImage(s2+s5+".png");
}
void Music::on_doubleSpinBox_valueChanged(double arg1)
{
int a = this->ui->doubleSpinBox->value();
player->setPlaybackRate(a);
}
void Music::on_doubleSpinBox_textChanged(const QString &arg1)
{
if(arg1 ==2){
QString s = this->ui->doubleSpinBox->text();
int a = s.toInt();
player->setPlaybackRate(a);
}
}
void Music::onDurationChanged(qint64 duration)
{
duration = player->duration();
ui->time->setMaximum(duration);
// qDebug()<<duration;
int secs = duration/1000;
int mins = secs/60;
secs = secs%60;
AllTime = QString::asprintf("%d:%d",mins,secs);
ui->label->setText(NowTime+"/"+AllTime);
if(this->ui->time->value() == 0){
QString music = playlist->currentMedia().canonicalUrl().fileName();
QString s1 = ".mp3";
QString s2 = "E:/QT5.99/Code/week12/build-ClassExer-Desktop_Qt_5_9_9_MinGW_32bit-Debug/";
QString s3 = s2 + music.mid(0,music.length()-s1.length());
this->ui->now->setPlainText("当前正在播放:" + music.mid(0,music.length()-s1.length()));
circleImage(s3 + ".png");
}
}
void Music::onPositionChanged(qint64 position)
{
if(ui->time->isSliderDown())
return;
ui->time->setSliderPosition(position);
int secs = position/1000;
int mins = secs/60;
secs = secs % 60;
NowTime = QString::asprintf("%d:%d",mins,secs);
ui->label->setText(NowTime+"/"+AllTime);
}
void Music::on_time_sliderReleased()
{
player->setPosition(ui->time->value());
}
void Music::on_musiclist_itemDoubleClicked(QListWidgetItem *item)
{
playlist->setCurrentIndex(ui->musiclist->row(item)); //传入点击文件的行号
this->ui->start->setText("||");
M_Now = playlist->currentIndex();
QString s1 = filelist.at(M_Now);
QString s2 = "E:/QT5.99/Code/week12/build-ClassExer-Desktop_Qt_5_9_9_MinGW_32bit-Debug/";
QString s3 = s1.mid(s2.length(),s1.length() - s2.length());
QString s4 = ".mp3";
QString s5 = s3.mid(0,s3.length()-s4.length());
ui->now->setPlainText("当前正在播放:"+s5);
player->play();
circleImage(s2+s5+".png");
}
void Music::circleImage(QString path)
{
QPixmap image(path);
image = image.scaled(QSize(300,300),Qt::KeepAspectRatio,Qt::SmoothTransformation);
this->ui->image->setPixmap(image);
this->ui->image->setFixedSize(image.size());
//罩出来形成一个⚪
QPixmap mask(300, 300);
mask.fill(Qt::transparent);
QPainter painter(&mask);
painter.setRenderHint(QPainter::Antialiasing, true);
painter.setBrush(Qt::black);
painter.drawEllipse(mask.rect());
this->ui->image->setMask(mask.mask());
}
main.cpp
#include "mainwindow.h"
#include"client.h"
#include <QApplication>
#include"server.h"
#include"music.h"
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
// MainWindow w;
// w.show();
Music m;
m.show();
return a.exec();
}