


今天开始完成后半部分,计划一下午完结,不出意外今天过后APP就可以正常使用了,可以进行播放暂停切歌的功能,后面准备用别人现成的接口来实现歌曲数据的导入,计划本周完成所有工作,后面会进行优化,先将基础功能完善
这里素材一定要提前自取:黑马云音乐代码素材

先在配置文件中配置好跳转的路由信息

这里的Play代码直接去素材中获取就行,一定要确保跳转逻辑的存在

这里的Find复制过来后记得修改一下,这里要加入NavPathStack相关信息

还需要添加跳转逻辑,根据名称进行跳转

新版本的API可能需要改动,我这里是最新版的

将所有的ComponentV2改成Component,动态变量用State


可以通过单击图片进行跳转了


想去自己了解核心逻辑的可以去看下官方文档我这里就不做过多逻辑相关的解释了: 使用AVPlayer播放音频(ArkTS)
这里的逻辑有点复杂,简单给大家讲解一下吧 创建一个工具类,用来管理歌曲的播放

初始化一下播放器

点击页面跳转的时候播放音乐

这里不方便给大家展示,因为是音频


先创建数据类型

创建好音乐相关的变量

播放音乐的时候修改就行了

可以看到图片发生了改变



对属性进行深度监听

监听时间变化

这里的还是要改一下的,要不然会报错

进度条这里换成真实的数据

跳转进度的方法别忘了



添加两个字段来存放我们的歌曲

核心逻辑如下,简单来说就是判断下当前播放的歌曲在不在列表,如果在判断是否正在播放,如果正在播放就继续播放,如果是未在播放的歌曲就切歌 如果歌曲不在列表将歌曲添加到列表首位,直接就可以开始播放

切歌功能已经可以正常进行了


先定义一个标志来记录一下状态

添加暂停逻辑

歌曲播放的时候设置为true

获取下当前播放的歌曲并且根据状态修改播放器图标

可以看到这里只有一个正在播放的歌曲有播放图标


这里的逻辑就简单了,就是切换列表中的歌曲

在相应的图标位置添加点击事件就可以完成音乐的切换

这里好像也是没办法进行测试


这里也不难,就是重复那部分有点区别
先加入变量记录播放模式

优化播放逻辑,这里要注意下一首的函数中传参了,如果是自动结束播放就会重复播放

这里要监听一下

这个就测试一下随机播放吧,我这里提前放进去了几首歌

目前播放的是孤独

点完下一首变成空心了

再点上一首变成英文歌了



这里先改造展示的歌曲数量

通过单击列表中的数据来进行播放歌曲

接下来就是删除歌曲的逻辑,这里我感觉可以优化一下,老师是这样将的,那就先这样

在删除按钮添加删除逻辑,当列表没有歌曲时回退上一页

这里可以完成删除的逻辑了

果不其然还是没有完成,还有最后两个功能没有完成,目前加上写博客的时间差不多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',()=>new GlobalMusic())!
// 定义方法
async init () {
if(!this.player){
this.player = await media.createAVPlayer()
}
// 监听状态变化
this.player.on('stateChange',(state) => {
if(state === 'initialized'){
this.player?.prepare()
}else if(state === 'prepared'){
this.player?.play()
this.currentSong.isPlay = true
} else if(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
}
// 跳转进度 seek
seekPlay(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
}else 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 >= 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 = new AvPlayerManager()