双非大学生自学鸿蒙5.0零基础入门到项目实战--黑马云音乐中篇

Ne0inhk

— 11 min read
双非大学生自学鸿蒙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()
Could not load content