基于鸿蒙HarmonyOS开发的音乐app项目 —— api12 —— 【源码在文末】 ...

目录
简介
项目架构
 UI界面实现
  swiper轮播部分（banner）
      数据结构
       数据
      实当代码 
  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组件。
      具体代码如下：

结语 

      作者始终相信，音乐是有力量的。如果喜欢，贫苦动动小手给作者点个关注点个赞，谢谢啦，源码可以私信作者获取哦，免费滴~~~~


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。