HMI-54-【多媒體】音樂播放器 3

HMI-54-【多媒體】音樂播放器 3

今天我們接著搞音樂播放器，今天我們實現這個中心的音樂播放器。也就是這個歌曲信息，上一曲下一曲暫停，播放進度啥的。

當前進度

音樂播放器基本都可以使用了，后面再寫一個后面一個就是實現真正的播放功能，目前想的就是使用Qt自帶的媒體類。

HMI-54-【多媒體】音樂播放器 3

當前進度

音樂信息

音樂時間

上一曲下一曲

播放按鈕

轉盤動畫

繪制進度條

第三階段成果展示

第二階段成果展示

第一階段成果展示

關鍵字： HMI、Multifunction、Qt、qml、Music

這個音樂的播放界面其實是一個子控件件，將來服務于USB音樂、藍牙音樂和網絡音樂，他們都用這個界面。

音樂信息

音樂信息，這個就沒啥好說的了，就是三個label，如下圖

接口函數如下：

void MFD_MultiMedia_Music::setMusic(QString name) { ui->label_music->setText(name); } void MFD_MultiMedia_Music::setSinger(QString signer) { ui->label_singer->setText(signer); } void MFD_MultiMedia_Music::setAlbum(QString album) { ui->label_album->setText(album); }

音樂時間

音樂時間是兩個label，一個是設置當前播放時間，一個是歌曲總時間。UI就不放了，直接放接口，代碼如下

void MFD_MultiMedia_Music::setTimeGo(QString time) { ui->label_time_Go->setText(time); } void MFD_MultiMedia_Music::setTimeDuration(QString time) { ui->label_time_Go->setText(time); }

上一曲下一曲

上一曲下一曲就是兩個按鈕，和面會發送信號，UI就是兩個Button，代碼如下：

void MFD_MultiMedia_Music::on_pushButton_next_clicked() { emit signal_MusicNext(); } void MFD_MultiMedia_Music::on_pushButton_previous_clicked() { emit signal_MusicPrevious(); }

播放按鈕

界面上就是一個Button，操作代碼如下：

void MFD_MultiMedia_Music::on_pushButton_palyOrPuse_clicked() { if(mPlayFlag) { mTimerPlayRotatePic->stop(); ui->pushButton_palyOrPuse->setStyleSheet("QPushButton{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/Music/play.png);}"); } else { mTimerPlayRotatePic->start(1000/60); ui->pushButton_palyOrPuse->setStyleSheet("QPushButton{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/Music/pause.png);}"); } mPlayFlag = !mPlayFlag; }

函數一個是操作播放標志位，一部分是設置按鈕樣式，還有一部分就是開啟和關閉 動畫的Timer。

轉盤動畫

轉盤動畫就是繪制一個圖片，通過改變painter 的屬性來旋轉。后面是不是可以使用動畫呢。代碼如下：

void MFD_MultiMedia_Music::drawPicGoRotate(int angle) { QPainter painter (ui->label_timeGoPic_rotate); painter.setRenderHint((QPainter::SmoothPixmapTransform)); painter.setRenderHint(QPainter::HighQualityAntialiasing); painter.translate(ui->label_timeGoPic_rotate->width()/2,ui->label_timeGoPic_rotate->height()/2); painter.save(); painter.rotate(angle); painter.drawPixmap((0-ui->label_timeGoPic_rotate->width()/2),(0-ui->label_timeGoPic_rotate->height()/2),ui->label_timeGoPic_rotate->width(),ui->label_timeGoPic_rotate->height(),QPixmap(":/Multimedia/Resources/MultifunctionDisplay/Multimedia/Music/timego_back_ratate_poointer.png")); painter.restore(); }

繪制進度條

就是繪制個圓弧，代碼如下：

void MFD_MultiMedia_Music::drawTimeLine(int time) { QPainter painter (ui->label_timeGoPic); painter.setRenderHint((QPainter::SmoothPixmapTransform)); painter.setRenderHint(QPainter::HighQualityAntialiasing); painter.translate(ui->label_timeGoPic->width()/2,ui->label_timeGoPic->height()/2); painter.setPen(QPen(QColor(255,161,53),8)); painter.save(); painter.drawArc((0-ui->label_timeGoPic->width()/2)+4,(0-ui->label_timeGoPic->height()/2)+4,ui->label_timeGoPic->width()-8,ui->label_timeGoPic->height()-8,90*16,time*16); painter.restore(); }

今天就到這里了。

第三階段成果展示

目前已完成液晶儀表三種模式的初步顯示，小模塊后期根據精力更新了，主要還得找美術來搞資源，自己能力不夠。暫未跟新計劃。展示如下：

[video(video-yznBr6e3-1648369267384)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=679609061)(image-https://img-blog.csdnimg.cn/img_convert/4d157e1cb316b007a2cb9790cb2dbfde.png)(title-基于Qt的汽車儀表模擬 3.0)]

B站鏈接：https://www.bilibili.com/video/BV1WS4y137y1/

第二階段成果展示

目前以完成HUD界面及接口開發，液晶儀表舒適模式和運動模式的開發。展示如下：

[video(video-2AqJ88TY-1645273728489)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=594179292)(image-https://img-blog.csdnimg.cn/img_convert/e75563c3ce68bc980547dde8f6e265ba.png)(title-基于Qt的汽車儀表模擬 2.0)]

B站鏈接：https://www.bilibili.com/video/BV1aq4y1t7H7/

第一階段成果展示

目前以完成HUD界面及接口開發，液晶儀表舒適模式開發。展示如下：

[video(video-ArCvRvBQ-1642664938100)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=77197267)(image-https://img-blog.csdnimg.cn/img_convert/ccddd04e0cef191fd33d7f58d41adb24.png)(title-基于Qt的汽車儀表模擬 1.0))]

B站鏈接：https://www.bilibili.com/video/BV1qJ411X7Gs/

說明：

本項目中所使借鑒原型來自：[吉利] 博瑞GE | 儀表HMI設計、吉利汽車HMI項目。

多媒體部分是來自吉利博瑞2017旗艦版界面所有權和解釋權都歸吉利汽車所有。

設計圖的所有權和解釋權都歸吉利汽車所有。

本項目所有資源文件均由**打不死的小海**復刻制作。

本項目代碼暫時不會開源，有需要的源碼的可與我聯系，左上角二維碼加微信。

本項目僅限學習交流、禁止商業使用。

Qt 交通智能體

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。