双非大学生自学鸿蒙5.0零基础入门到项目实战--黑马云音乐中篇
- 个人首页： VON
- 鸿蒙系列专栏： 鸿蒙开发小型案例总结
- 综合案例 ：鸿蒙综合案例开发
- 鸿蒙6.0：从0开始的开源鸿蒙6.0.0
- 文章所属专栏：鸿蒙5.0零基础入门到项目实战
黑马云音乐中篇
前言
今天开始完成后半部分，计划一下午完结，不出意外今天过后APP就可以正常使用了，可以进行播放暂停切歌的功能，后面准备用别人现成的接口来实现歌曲数据的导入，计划本周完成所有工作，后面会进行优化，先将基础功能完善
实践
这里素材一定要提前自取：黑马云音乐代码素材
1、发现歌单与播放页跳转功能
思路
操作
先在配置文件中配置好跳转的路由信息
这里的Play代码直接去素材中获取就行，一定要确保跳转逻辑的存在
这里的Find复制过来后记得修改一下，这里要加入NavPathStack相关信息
还需要添加跳转逻辑，根据名称进行跳转
注意
新版本的API可能需要改动，我这里是最新版的
将所有的ComponentV2改成Component,动态变量用State
测试
可以通过单击图片进行跳转了
2、基础播放功能
思路
想去自己了解核心逻辑的可以去看下官方文档我这里就不做过多逻辑相关的解释了：
使用AVPlayer播放音频(ArkTS)
操作
这里的逻辑有点复杂，简单给大家讲解一下吧
创建一个工具类，用来管理歌曲的播放
初始化一下播放器
点击页面跳转的时候播放音乐
测试
这里不方便给大家展示，因为是音频
3、共享播放数据
3.1、方案
思路
实现
先创建数据类型
创建好音乐相关的变量
播放音乐的时候修改就行了
测试
可以看到图片发生了改变
3.2、歌曲时间
思路
实现
对属性进行深度监听
监听时间变化
这里的还是要改一下的，要不然会报错
进度条这里换成真实的数据
跳转进度的方法别忘了
测试
4、播放功能
4.1、歌曲列表
思路
操作
添加两个字段来存放我们的歌曲
核心逻辑如下，简单来说就是判断下当前播放的歌曲在不在列表，如果在判断是否正在播放，如果正在播放就继续播放，如果是未在播放的歌曲就切歌
如果歌曲不在列表将歌曲添加到列表首位，直接就可以开始播放
测试
切歌功能已经可以正常进行了
4.2、播放和暂停
思路
操作
先定义一个标志来记录一下状态
添加暂停逻辑
歌曲播放的时候设置为true
获取下当前播放的歌曲并且根据状态修改播放器图标
测试
可以看到这里只有一个正在播放的歌曲有播放图标
4.3、上一首和下一首
思路
操作
这里的逻辑就简单了，就是切换列表中的歌曲
在相应的图标位置添加点击事件就可以完成音乐的切换
测试
这里好像也是没办法进行测试
4.4、切换播放模式
思路
操作
这里也不难，就是重复那部分有点区别
先加入变量记录播放模式
优化播放逻辑，这里要注意下一首的函数中传参了，如果是自动结束播放就会重复播放
这里要监听一下
测试
这个就测试一下随机播放吧，我这里提前放进去了几首歌
目前播放的是孤独
点完下一首变成空心了
再点上一首变成英文歌了
4.5、播放列表
思路
操作
这里先改造展示的歌曲数量
通过单击列表中的数据来进行播放歌曲
接下来就是删除歌曲的逻辑，这里我感觉可以优化一下，老师是这样将的，那就先这样
在删除按钮添加删除逻辑，当列表没有歌曲时回退上一页
测试
这里可以完成删除的逻辑了
总结
果不其然还是没有完成，还有最后两个功能没有完成，目前加上写博客的时间差不多9小时了，10个小时完成基础功能没什么问题，总结下来就是数据处理那部分有些迷茫，其他的逻辑功能都还行，明天继续完善。
工具类代码
import{ media } from '@kit.MediaKit'import{ GlobalMusic } from '../models/globalMusic'import{ SongItemType } from '../models/music'import{ AppStorageV2 } from '@kit.ArkUI' class AvPlayerManager{// 播放器 player : media.AVPlayer | null = null currentSong : GlobalMusic = AppStorageV2.connect(GlobalMusic,'SONG_KEY',()=>newGlobalMusic())!// 定义方法 async init (){if(!this.player){ this.player = await media.createAVPlayer()}// 监听状态变化 this.player.on('stateChange',(state)=>{if(state ==='initialized'){ this.player?.prepare()}elseif(state ==='prepared'){ this.player?.play() this.currentSong.isPlay =true}elseif(state ==='completed'){ this.nextPlay(true)}})// 监听时间变化 this.player.on('durationUpdate',(duration)=>{ this.currentSong.duration = duration }) this.player.on('timeUpdate',(time)=>{ this.currentSong.time = time })}// 播放歌曲singPlay(song:SongItemType){const inList = this.currentSong.playList.some(item => item.id === song.id)// 歌曲在列表里if(inList){// 正在播放if(this.currentSong.url === song.url){ this.player?.play() this.currentSong.isPlay =true}else{// 如果没有播放根据索引找到歌曲进行播放 this.currentSong.playIndex = this.currentSong.playList.findIndex(item => item.id === song.id)// 切歌 this.changeSong()}}else{// 歌曲不在列表 this.currentSong.playList.unshift(song)// 将歌曲添加到列表并且设置为索引为0 this.currentSong.playIndex =0// 切歌 this.changeSong()}}// 切歌 async changeSong(){ await this.player?.reset() this.currentSong.duration =0 this.currentSong.time =0 this.currentSong.img = this.currentSong.playList[this.currentSong.playIndex].img this.currentSong.name = this.currentSong.playList[this.currentSong.playIndex].name this.currentSong.author = this.currentSong.playList[this.currentSong.playIndex].author this.currentSong.url = this.currentSong.playList[this.currentSong.playIndex].url this.player!.url = this.currentSong.url }// 跳转进度 seekseekPlay(value:number){ this.player?.seek(value)}// 暂停paused(){ this.player?.pause() this.currentSong.isPlay =false}// 上一首prevPlay(){if(this.currentSong.playMode ==='random'){// 随机播放// Math.random : [0,1) this.currentSong.playIndex = Math.floor(Math.random()* this.currentSong.playList.length)}else{ this.currentSong.playIndex--if(this.currentSong.playIndex <0){ this.currentSong.playIndex = this.currentSong.playList.length -1}} this.singPlay(this.currentSong.playList[this.currentSong.playIndex])}// 下一首nextPlay(autoNextPlay ?: boolean){if(this.currentSong.playMode ==='repeat'&& autoNextPlay){// 重复播放：当前模式为repeat并且autoNextPlay为true this.currentSong.playIndex = this.currentSong.playIndex }elseif(this.currentSong.playMode ==='random'){// 随机播放// Math.random : [0,1) this.currentSong.playIndex = Math.floor(Math.random()* this.currentSong.playList.length)}else{ this.currentSong.playIndex++if(this.currentSong.playIndex >= this.currentSong.playList.length){ this.currentSong.playIndex =0}} this.singPlay(this.currentSong.playList[this.currentSong.playIndex])}// 列表移除歌曲removeSong(index:number){if(index === this.currentSong.playIndex){// 删除的是正在播放的歌曲if(this.currentSong.playList.length >1){// 列表有多首歌 this.currentSong.playList.splice(index,1)// 目前播放的歌曲的最后一首if(this.currentSong.playIndex >= this.currentSong.playList.length){ this.currentSong.playIndex =0} this.singPlay(this.currentSong.playList[this.currentSong.playIndex])}else{// 列表只有一首歌 this.player?.reset() this.currentSong.reset()}}else{if(index < this.currentSong.playIndex){// 要删除歌曲在播放的前面 this.currentSong.playIndex--} this.currentSong.playList.splice(index,1)}}} export const playerManager : AvPlayerManager =newAvPlayerManager()
