一、功能说明基于 QML QtMultimedia实现轻量音乐播放器播放 / 暂停 / 停止播放进度条拖拽定位音量调节滑块歌曲列表点击切换曲目界面美化、状态联动二、项目配置项目.pro/ CMake 必须添加多媒体模块proQT multimedia三、完整 QML 代码main.qmlqmlimport QtQuick 2.15 import QtQuick.Controls 2.15 import QtMultimedia 5.15 ApplicationWindow { width: 450 height: 320 visible: true title: QML 音乐播放器 color: #f8f9fa // 多媒体核心播放器 MediaPlayer { id: player volume: 0.7 // 默认音量 onPositionChanged: progressSlider.value position onDurationChanged: progressSlider.to duration } // 歌曲列表数据模型 ListModel { id: songModel ListElement { name: 歌曲一; path: qrc:/music/song1.mp3 } ListElement { name: 歌曲二; path: qrc:/music/song2.mp3 } ListElement { name: 歌曲三; path: qrc:/music/song3.mp3 } } Column { anchors.fill: parent padding: 15 spacing: 12 // 歌曲列表 ListView { id: songList width: parent.width height: 140 model: songModel clip: true delegate: Rectangle { height: 36 color: ListView.isCurrentItem ? #cce5ff : white border.color: #eee Text { text: name anchors.verticalCenter: parent.verticalCenter leftMargin: 10 font.pixelSize: 14 } // 点击切换歌曲并播放 MouseArea { anchors.fill: parent onClicked: { player.source path player.play() } } } } // 播放进度条 Slider { id: progressSlider width: parent.width height: 30 from: 0 to: 0 value: 0 onValueChanged: { // 拖拽定位播放位置 if(thumb.pressed) player.position value } } // 控制按钮行 Row { anchors.horizontalCenter: parent.horizontalCenter spacing: 20 Button { text: player.playbackState MediaPlayer.PlayingState ? 暂停 : 播放 width: 80 onClicked: { if(player.playbackState MediaPlayer.PlayingState) player.pause() else player.play() } } Button { text: 停止 width: 80 onClicked: player.stop() } } // 音量控制 Row { width: parent.width spacing: 10 Text { text: 音量; font.pixelSize: 14 } Slider { id: volSlider width: 200 from: 0 to: 100 value: player.volume * 100 onValueChanged: player.volume value / 100.0 } } } }四、资源配置将 mp3 音频文件放入 Qt 资源文件qrc修改ListElement中path为实际资源路径Qt5/Qt6 均兼容该代码。五、核心知识点MediaPlayerQt 标准多媒体播放核心类进度条Slider双向绑定播放位置ListView列表点击切换播放源音量数值映射0~100 滑块 → 0.0~1.0 播放器音量状态判断区分播放 / 暂停按钮文本。小结该案例整合 QML布局、列表、滑块、多媒体、信号绑定是 Qt Quick 多媒体项目入门首选可扩展上一曲 / 下一曲、循环播放、歌词显示等功能。
Qt 实战 03|QML 音乐播放器 播放 / 暂停、进度条、音量、歌曲列表
发布时间:2026/6/12 20:15:07
一、功能说明基于 QML QtMultimedia实现轻量音乐播放器播放 / 暂停 / 停止播放进度条拖拽定位音量调节滑块歌曲列表点击切换曲目界面美化、状态联动二、项目配置项目.pro/ CMake 必须添加多媒体模块proQT multimedia三、完整 QML 代码main.qmlqmlimport QtQuick 2.15 import QtQuick.Controls 2.15 import QtMultimedia 5.15 ApplicationWindow { width: 450 height: 320 visible: true title: QML 音乐播放器 color: #f8f9fa // 多媒体核心播放器 MediaPlayer { id: player volume: 0.7 // 默认音量 onPositionChanged: progressSlider.value position onDurationChanged: progressSlider.to duration } // 歌曲列表数据模型 ListModel { id: songModel ListElement { name: 歌曲一; path: qrc:/music/song1.mp3 } ListElement { name: 歌曲二; path: qrc:/music/song2.mp3 } ListElement { name: 歌曲三; path: qrc:/music/song3.mp3 } } Column { anchors.fill: parent padding: 15 spacing: 12 // 歌曲列表 ListView { id: songList width: parent.width height: 140 model: songModel clip: true delegate: Rectangle { height: 36 color: ListView.isCurrentItem ? #cce5ff : white border.color: #eee Text { text: name anchors.verticalCenter: parent.verticalCenter leftMargin: 10 font.pixelSize: 14 } // 点击切换歌曲并播放 MouseArea { anchors.fill: parent onClicked: { player.source path player.play() } } } } // 播放进度条 Slider { id: progressSlider width: parent.width height: 30 from: 0 to: 0 value: 0 onValueChanged: { // 拖拽定位播放位置 if(thumb.pressed) player.position value } } // 控制按钮行 Row { anchors.horizontalCenter: parent.horizontalCenter spacing: 20 Button { text: player.playbackState MediaPlayer.PlayingState ? 暂停 : 播放 width: 80 onClicked: { if(player.playbackState MediaPlayer.PlayingState) player.pause() else player.play() } } Button { text: 停止 width: 80 onClicked: player.stop() } } // 音量控制 Row { width: parent.width spacing: 10 Text { text: 音量; font.pixelSize: 14 } Slider { id: volSlider width: 200 from: 0 to: 100 value: player.volume * 100 onValueChanged: player.volume value / 100.0 } } } }四、资源配置将 mp3 音频文件放入 Qt 资源文件qrc修改ListElement中path为实际资源路径Qt5/Qt6 均兼容该代码。五、核心知识点MediaPlayerQt 标准多媒体播放核心类进度条Slider双向绑定播放位置ListView列表点击切换播放源音量数值映射0~100 滑块 → 0.0~1.0 播放器音量状态判断区分播放 / 暂停按钮文本。小结该案例整合 QML布局、列表、滑块、多媒体、信号绑定是 Qt Quick 多媒体项目入门首选可扩展上一曲 / 下一曲、循环播放、歌词显示等功能。