QT音乐播放器11----播放进度条随时间移动、播放模式功能与切换上、下曲、边框圆角图片
简介：
基于QT5.12版本的Quick QML项目----恋羽音乐播放器（爆肝中......）
上一讲链接：https://blog.csdn.net/2301_80668528/article/details/152801602?fromshare=blogdetail&sharetype=blogdetail&sharerId=152801602&sharerefer=PC&sharesource=2301_80668528&sharefrom=from_link
下一讲链接：https://blog.csdn.net/2301_80668528/article/details/153560295?fromshare=blogdetail&sharetype=blogdetail&sharerId=153560295&sharerefer=PC&sharesource=2301_80668528&sharefrom=from_link
上一讲效果：
音乐播放效果①
ps：如有错误，欢迎指出^\/^
原视频出处：https://b23.tv/gFnMsLg
一、播放进度条随时间移动
1.加载歌曲时间数据
2.添加slider属性变量
在LayoutBottomView.qml文件中添加sliderTo（进度条后端）和sliderFrom（进度条前端）属性：
3.添加slider{}组件的属性
4.添加设置Slider的函数
在getUrl()函数中调用：
5.在MusicPlayer{}组件中添加onPositionChanged:{}的接口
Ctrl+R运行，随机进入一个歌单列表，点击播放按键：
发现进度条的确跟着音乐声在变化，但时间小数值过长，此时需要用到parseInt()将va_mm、va_ss、to_mm、to_ss转化成int类型：
Ctrl+R运行即可解决：
6.设置进度条被拖动时的属性
导入模块：
import QtMultimedia 5.12
添加onMove:{}事件：
注意：Qt6.7版本此处应该改成“mediaPlayer.setPosition(value)”
Ctrl+R运行，拖动进度条：
时间何播放位置均只能正确跳转
二、播放模式功能与切换上、下曲
1.三个按键对应的接口函数
进入LayoutBottomView.qml文件：
添加三个接口函数：
/* “上一曲”按键接口 */
function playPrevious(){}
/* “下一曲”按键接口 */
function playNext(){}
/* “播放模式”按键接口 */
function changePlayMode(){}
2.添加onClicked:{}事件
给按键MusicIconButton：“播放模式”、“上一曲”、“下一曲”onClicked:{}事件
3.修改“播放模式”按键的iconSource和toolTip
在LayoutBottomView.qml文件中添加数组playModeList，用来存放三种播放模式：
修改“播放模式”的iconSource和toolTip（166和169行）：
4.编写changePlayMode()函数
5.保存当前播放模式
在main.qml中添加模块：
import Qt.labs.settings 1.1 //保存播放模式
添加Settings组件：
进入layoutBottomView.qml文件。在changePlayMode()函数接口中用Settings保存状态：
在刚创建时就设置初始值为“顺序播放”：
Ctrl+R运行：
点击右下角播放模式按键就能进行切换：
右键随机一个.qml文件，点击“在Explorer中打开”：
返回上一级目录“QTproject”，打开一下build-MusicPlayer_xxxx文件：
进入其中的conf文件：
右键settings,ini文件，“打开”：
即可看到当下存放的currentPlayMode的下标：
即说明数据保存成功
6.“上一曲”、“下一曲”按键函数接口
7.实现上一曲、下一期之间的切换
用onCurrentChange:{}接口实现：
设置默认current为“-1”：
修改MusicListView.qml文件中的“播放/暂停”按键的onClicked:{}事件：
修改playMusic()和getUrl()函数：
Ctrl+R运行，打开任意歌单，点击播放：
点击下一曲：
再点击两次上一曲：
8.设置一首歌曲播完之后的自动切换
设置一首歌曲播完之后按播放模式进行自动切换：
(1)在main.qml文件中监听事件onPlaybackStateChange:{}事件:
(2)修改LayoutBottomView.qml中的“上一首”、"下一首"播放逻辑：
/* “上一曲”按键接口 */
function playPrevious()
{
if(playList.length < 1) return
switch(currentPlayMode)
{
/* 顺序播放 */
case 0:
current = (current + playList.length - 1) % playList.length
break
/* 随机播放 */
case 1:
{
var random = parseInt(Math.random() * playList.length)
current = current === random ? random + 1 : random //当随机取出的一首音乐就是当前播放的这一首时，就取random的上一首；否则，取用random
break
}
/* 单曲循环 */
case 2:
{
MediaPlayer.play() //再次播放
break
}
}
}
/* “下一曲”按键接口 */
function playNext(type = 'nature') //参数type:歌曲切换原因（有两种：歌曲自然播放结束/按键点击下一首），默认为歌曲自然播放结束
{
if(playList.length < 1) return
switch(currentPlayMode)
{
/* 顺序播放 */
case 0:
current = (current + 1) % playList.length
break
/* 随机播放 */
case 1:
{
var random = parseInt(Math.random() * playList.length)
current = current === random ? random + 1 : random //当随机取出的一首音乐就是当前播放的这一首时，就取random的下一首；否则，取用random
break
}
/* 单曲循环 */
case 2:
{
if(type === 'nature') //如果是因为当前歌曲自然播放完毕
{
MediaPlayer.play() //再次播放
break
}
else //因为点击了“下一首”按键
{
current = (current + 1) % playList.length
break
}
}
}
} (2)关闭CallBack，避免进入循环播放下一首逻辑：
新建变量playbackStateChangeCallbackEnabled：
修改main.qml中MediaPlayer中的onPlaybackStateChanged:{}逻辑：
修改onCurrentChanged:{}添加设置playbackStateChangeCallbackEnabled的逻辑：
在getUrl()的 mediaPlayer.play()后设置其为true模式：
Ctrl+R运行，测试效果符合预期
三、设置边框圆角图片
1.新建.qml文件
复制粘贴“MusicRoundImage.qml”文件，重命名为“MusicBorderImage.qml”：
2.修改文件属性
（1）最外层改成“Rectangle”：
（2）添加gradient渐变效果
注：mask蒙版会在黑色时把Image：image显示出来；在白色时，把Image：image图片剪掉
（3）设置外层圆角radius：
（4）设置旋转动画
添加参数：
isRotating----是否旋转
rotationAngel----图片初始化角度
修改Image图片的高宽为之前的0.9倍：
设置动画：
3.调用MusicBorderImage
（1）进入LayoutBottomView.qml，将显示歌曲封面的MusicRoundImage改成MusicBorderImage：
（2）进入PageHomeView.qml文件，修改：
（3）进入DetailPlayListView.qml文件，修改图片类型：
（4）分别设置MusicGridHotView和MusicGridLatestView中的图片：
Ctrl+R运行：
至此，QT Quick QML项目音乐播放器第11部分----播放进度条随时间移动、播放模式功能与切换上、下曲、边框圆角图片正式完结，感谢您的阅读！
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
32
0- 0
已为社区贡献7条内容
所有评论(0)