基于鸿蒙HarmonyOS开发的音乐app项目 —— api12 —— 【源码在文末】
目录
简介
项目架构
UI界面实现
数据结构
数据
实现代码
grid网格布局部分（recommend）
数据结构
数据
实现代码
list列表布局部分（music）
数据结构
数据（部分展示）
实现代码（部分展示）
AVPlayer播放器实现
播放器的工作流
播放器创建
播放歌曲
播放状态信息监听
播放器与页面通信
优化
添加多首歌曲以及歌曲间的切换
唱片旋转与环绕式进度条
结语
简介
前言：本项目为学习项目，学习了某黑某马的b站教程内容并修改，代码纯手敲，非copy！
为了宇宙的爱与和平，人类的和谐稳定，本团队开发了一个音乐app小项目~~~~~~~~~~~~（以上为作者臆想，不用理会嘿嘿）
本项目旨在利用鸿蒙HarmonyOS开发一个鸿蒙音乐app，页面展示如下：
项目架构
项目采用了MVVM与MVC架构的结合与简化，以下将为大家讲解项目架构：
- pages页面部分作为项目UI界面的载体
- model部分对应项目模型与数据结构的接口和类
- constant部分对应接口与类的实例化对象用于存储项目数据
- utils部分对应项目所采用的工具
架构实现流程图如下：
UI界面实现
由于UI界面内容较多，所以主要给大家讲解swiper轮播部分，grid网格布局部分，list列表布局部分
swiper轮播部分（banner）
数据结构
数据
实现代码
grid网格布局部分（recommend）
数据结构
数据
实现代码
list列表布局部分（music）
数据结构
数据（部分展示）
实现代码（部分展示）
AVPlayer播放器实现
本项目的主要难点与音乐播放效果就在于AVPlayer播放器的实现，接下来我们将带着大家一步一步讲解本项目在此的实现。
播放器的工作流
首先我们得了解HarmonyOS中的AVPlayer播放器的工作流
通过上面工作流图，我们可以看到播放器实质上就是我们做一个动作，然后播放器进入一个状态。所以在开发时，我们只需要理清楚，我们在哪一个时刻，需要哪一个状态，然后做这个状态所需要的前置动作即可。
播放器创建
首先，我们根据第一个红框的代码创建一个player播放器，类型为media.AVPlayer。然后我们编写第二个红框中的init初始方法，使用media中的createAVPlayer方法创建播放器实例，并把这个实例 传入给我们刚才创建的player播放器。（这里要注意因为创建实例不是立即创建的，而是要使用了方法后再创建，所以这里是一个异步方法，我们需要加上await以及async）
然后我们需要思考一个问题，我们既然不是立即创建这个播放器实例，那我们应该在什么时候创建呢。
在这里我们可以考虑以下用户侧，作为一个用户，我们肯定希望我们在想使用它的时候它是已经创建好的，而不是我想使用它的时候它才创建。
所以我们将创建实例这个部分放在了进入程序的时候，这样我们只要进入程序，创建了一个播放器，想什么时候使用就什么时候使用即可。
EntryAbility是鸿蒙加载应用的入口，我们可以在onWindowStageCreate中添加init初始化方法，即可在应用进入页面前就把播放器准备好，这样我们就可以随时使用我们的播放器。
播放歌曲
既然咱们播放器已经创建好了，那么咱们的主线任务肯定就是让歌曲能够播放呀，作为一个音乐app咱们怎么能不播放歌曲呢。
那如何播放呢，我们之前讨论了，想做好一个播放器，那我们就按照“动作-状态-动作”这一步一步即可，现在我们已经初始化好了一个播放器，是不是已经进入了初始化状态了呀，那我们下一步是不是做一个准备动作，进入待播放状态，然后再做一个播放动作就可以播放了呀。
所以在这里我们使用了AVPlayer的on方法用来监听它的状态，根据状态来进行我们的动作就可以实现播放器的播放啦。
当然，我们还没有设置播放什么呢，所以我们还得添加一个方法来告诉播放器，我们应该播放什么哦。
由于这一段代码涉及的部分有点多，所以读者只需要知道这两行代码，用于将播放源的url传入播放器即可，剩余代码后续还会讲解。
最后，我们将方法写入跳转至播放页面时的地方即可实现音乐的播放。
播放状态信息监听
此时我们已经实现了播放器的播放功能，主线任务已经完成啦，那我们就可以去完成一下各种各样的支线任务了。
首先，我们遇到的第一个支线任务就是：获取播放的信息。
以上图为例，我们应当获取播放歌曲的各个信息，并将数据传给我们的UI界面，使UI界面能够帮助我们渲染这个画面。
我们首先要将我们需要获取的数据给创建出来。
那我们该如何获取呢，在播放歌曲的代码部分我们使用了on方法来监听播放器的状态，同样，通过on方法我们也可以监听歌曲正在播放的时间以及歌曲的总时长。
然后其他的数据我们不需要进行监听，因为在我们的数据部分已经整理好了（可见list列表布局部分）。结合上面我们通过播放歌曲创建的方法中传入的song，我们就可以直接获取到整个数据。
这样我们就实现了播放歌曲状态信息的监听。
播放器与页面通信
由于AVPlayer播放器是一个独立的音频线程，然后咱们的页面也是一个独立的线程，所以两者无法进行直接的数据交互，我们在上面获取到的播放的歌曲的信息也无法直接传输给我们的页面。这个时候我们就要使用的线程间的通信技术Emitter来创建线程之间的管道从而传输数据。
我们在播放器部分编写emitter将我们记录的信息发布出去， 然后我们可以在创建我们的音乐播放界面Play的时候将我们发布出去的信息进行订阅，从而实现数据之间的互通。
至此，我们的播放器也大致完成。
优化
添加多首歌曲以及歌曲间的切换
在我们之前的讲解中，我们只是实现了我们一首歌曲的播放，但是现实情况是，我们可能需要切换我们的歌曲，或者说我们希望有多首歌曲在我们的列表，这个时候我们该怎么办呢。
首先，和实现播放器一样，我们需要理清楚我们在什么状态下，做什么事情这一原则。
这里，也已经准备好了我们的一个工作流，我们只需要根据以上工作流一步一步解决即可。还记得那段之前说后面会讲的代码嘛，正是运用在了这里，我们只需要将文字转换为我们的代码即可实现，弄清了工作流以后，是不是写代码也很清楚了。
唱片旋转与环绕式进度条
在项目中，我们也添加了一些小细节，比如我们的唱片可以随着音乐进行自动的旋转，而且外部包裹了一个环形进度条。
自动旋转主要是采用了rotate定位方法，将图片的中心设置为圆点，然后使用onAppear进行360度的旋转。
进度条使用了鸿蒙中的Progress组件。
具体代码如下：
结语
作者始终相信，音乐是有力量的。如果喜欢，麻烦动动小手给作者点个关注点个赞，谢谢啦，源码可以私信作者获取哦，免费滴~~~~
