鸿蒙开发—黑马云音乐之music页面播放音乐（上）

目录

1.封装播放对象管理类

2.musicPage中调用AvPlayerManager完成播放歌曲

3.index.ets的播放信息样式

4.musicPage向index传数据

---

1.封装播放对象管理类

封装一个播放对象，之后播放音乐直接调用该对象。

src/main/ets/services/AvPlayerManager.ets：

export interface songItemType {
  img: string
  name: string
  author: string
  url: string
  id: string
}

//作用：负责管理播放对象的各种方法封装的
import media from '@ohos.multimedia.media'

//定义并导出播放对象管理类
export class AvPlayerManager {
  static avPlayer: media.AVPlayer = Object()

  //   1.0 封装初始化AvPlayer对象的方法
  // init方法将来在ets页面的aboutToAppear方法中调用
  static async init() {
    // 创建实例对象并且保存到全局的静态变量中
    AvPlayerManager.avPlayer = await media.createAVPlayer()

    //  监听状态的改变
    AvPlayerManager.avPlayer.on('stateChange', (state) => {
      //  查看state的状态
      console.log('mylog', '当前状态：', state)
      // 准备播放
      if (state == 'initialized') {
        AvPlayerManager.avPlayer.prepare()
      }

      // 播放
      if (state == 'prepared') {
        AvPlayerManager.avPlayer.play()
      }
    })
  }

  //  2.0 设置播放源(并且要能够实现重置)
  static async playMusic(music: songItemType) {
    console.log('mylog,播放歌曲:', music.name, 'url=', music.url)
    await AvPlayerManager.avPlayer.reset() //重置播放对象使其空闲
    AvPlayerManager.avPlayer.url = music.url //给播放对象设置播放源
  }
}

export class AvPlayerManager{}用来定义一个播放对象管理类；
static async init() {}，用来封装初始化AvPlayer对象的方法，  init方法将来在ets页面的aboutToAppear方法中调用；

实例对象 ：AvPlayerManager.avPlayer，实例：AvPlayerManager.avPlayer.prepare()、AvPlayerManager.avPlayer.play()；

2.musicPage中调用AvPlayerManager完成播放歌曲

 src/main/ets/pages/muiscPage.ets：

import { AvPlayerManager, songItemType } from '../services/AvPlayerManager'

@Entry
@Component
export struct MuiscPage {
  // 歌曲列表
  @State songs: songItemType[] = [
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.jpg',
      name: '直到世界的尽头',
      author: 'WANDS',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.m4a',
      id: '0000'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/1.jpg',
      name: '画',
      author: '赵磊',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/1.mp3',
      id: '0001'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/2.jpg',
      name: 'Sweet Dreams',
      author: 'TPaul Sax / Eurythmics',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/2.mp3',
      id: '0002'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/3.jpg',
      name: '奢香夫人',
      author: '凤凰传奇',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/3.m4a',
      id: '0003'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/4.jpg',
      name: '空心',
      author: '光泽',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/4.mp3',
      id: '0004'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/5.jpg',
      name: '反转地球',
      author: '潘玮柏',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/5.mp3',
      id: '0005'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/6.jpg',
      name: 'No.9',
      author: 'T-ara',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/6.m4a',
      id: '0006'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/7.jpg',
      name: '孤独',
      author: 'G.E.M.邓紫棋',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/7.m4a',
      id: '0007'
    },

    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/8.jpg',
      name: 'Lose Control',
      author: 'Hedley',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/8.m4a',
      id: '0008'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/9.jpg',
      name: '倩女幽魂',
      author: '张国荣',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/9.m4a',
      id: '0009'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/10.jpg',
      name: '北京北京',
      author: '汪峰',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/10.m4a',
      id: '0010'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/11.jpg',
      name: '苦笑',
      author: '汪苏泷',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/11.mp3',
      id: '0011'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/12.jpg',
      name: '一生所爱',
      author: '卢冠廷 / 莫文蔚',
      url: 'http://yjy-teach-oss.oss-cn-b