鸿蒙开发-五分钟带你手搓音乐播放器

1 选择技术

通过对比发现，AVPlayer流程完善易上手，足以满足我们的开发需求。

2 状态变化示例图

3 实现步骤

3.1 歌曲播放

核心代码

import { media } from '@kit.MediaKit';
import { SongType } from '../model/music';

export default class avplayer {
  // 1 定义播放器
  static player: media.AVPlayer = {} as media.AVPlayer;

  // 2 初始化播放器--->在加载应用时就初始化播放器
  static async init() {
    // 创建播放器
    avplayer.player = await media.createAVPlayer();
    // 监听播放状态
    avplayer.player.on('stateChange', state => {
      switch (state) {
      // 初始化状态
        case 'initialized':
          // 准备
          avplayer.player.prepare()
          break
      // 准备状态
        case 'prepared':
          // 播放
          avplayer.player.play()
          break
      }
    })
  }

  // 3 设置播放源   单曲播放
  static singlePlay(song: SongType) {
    avplayer.player.url = song.url
  }
}

在项目启动时就初始化播放器

调用播放方法

恭喜你 ，你已经实现了歌曲播放

3.2 向歌单列表中添加歌曲并实现歌曲切换

import { media } from '@kit.MediaKit';
import { SongType } from '../model/music';

export default class avplayer {
  // 1 全局播放器
  static player: media.AVPlayer = {} as media.AVPlayer;
  // 播放列表
  static playList: SongType[] = []
  // 播放索引
  static playIndex: number = 0

  // 2 初始化播放器--->在加载应用时就初始化播放器
  static async init() {
    // 创建播放器
    avplayer.player = await media.createAVPlayer();
    // 监听播放状态
    avplayer.player.on('stateChange', state => {
      switch (state) {
      // 初始化状态
        case 'initialized':
          // 准备
          avplayer.player.prepare()
          break
      // 准备状态
        case 'prepared':
          // 播放
          avplayer.player.play()
          break
      }
    })
  }

  // 3 设置播放源   单曲播放
  static async singlePlay(song: SongType) {
    //avplayer.player.url = song.url
    const index = avplayer.playList.findIndex(item => item.id == song.id)
    if (index >= 0) {
      // 正在播放
      if (avplayer.player.url == song.url) {
        // 继续播放
      } else {
        // 切换
        await avplayer.player.reset() // 进入闲置状态
        avplayer.player.url = song.url
      }
    } else {
      // 添加
      avplayer.playList.unshift(song)
      avplayer.playIndex = 0
      // 切换
      await avplayer.player.reset() // 进入闲置状态
      avplayer.player.url = song.url
    }
  }
}

恭喜你 ，你已经实现了添加歌曲和切换歌曲

3.3 播放器与页面通信

监听播放时长和歌曲时长

// 监听歌曲时长
avplayer.player.on('durationUpdate', duration => {
  avplayer.duration = duration
})
// 监听播放时长
avplayer.player.on('timeUpdate', time => {
  avplayer.time = time
})

使用emitter进行通信

什么时候进行发布播放信息

播放进度条

切换播放模式

上一首|暂停/播放|下一首

恭喜你 ，你已经手搓了一个音乐播放器

详细代码请参考

gitee.com/ren-huajie/…