应用场景

在一些时候，我们需要用到播放音频的功能，就需要使用AvPlayer。

书接上回，我们刚刚完成了一个简单的录音功能，那不如我们就立刻去播放这段录音吧！

录音功能怎么实现，在之前篇章有提到：

        录音振幅组件

        录音功能实现

完成效果

核心API        支持版本 9+

AVPlayer 播放管理类，用于管理和播放媒体资源

AVPlayerState 播放的全流程包含：创建AVPlayer，设置播放资源，设置播放参数（音量/倍速/焦点模式），播放控制（播放/暂停/跳转/停止），重置，销毁资源。

Progress组件显示进度条

样式结构

• 暂停开始键是系统自带的图标
• 通过一个布尔值决定状态
• 暂停状态点击调用开始播放，播放状态点击调用停止播放
• 进度条是progress
• 数字格式化后再展示

 Row({ space: 20 }) {
        Image(!this.playing ? $r('sys.media.ohos_ic_public_play') : $r('sys.media.ohos_ic_public_pause'))
          .width(24)
          .aspectRatio(1)
          .onClick(() => {
            if (!this.playing) {
              this.startPlay()
            } else {
              this.stopPlay()
            }
          })
        Progress({ value: this.value, total: this.total })
          .layoutWeight(1)
          .margin({ top: 20, bottom: 20 })
        Text() {
          Span((this.value / 1000).toFixed(0))
          Span(' / ')
          Span((this.total / 1000).toFixed(0))
        }
        .fontSize(20)
        .fontColor(Color.Gray)
      }
      .width('80%')

功能实现

• 接下来实现播放和停止播放的两个函数
• 录音功能记录了一个文件路径，在播放中直接打开该文件
• 创建播放实例 avPlayer 实例

// 播放录音
  async startPlay() {
    try {
      // 打开刚才记录的文件
      const file = fileIo.openSync(this.filePath, fileIo.OpenMode.READ_ONLY)
      // 创建 avPlayer 实例
      const avPlayer = await media.createAVPlayer()
      // 判断 avPlayer 状态
      avPlayer.on('stateChange', state => {
        if (state === 'initialized') {
          avPlayer.prepare() // 准备
        } else if (state === 'prepared') {
          avPlayer.loop = true // 循环播放
          this.total = avPlayer.duration // 获取总时长
          avPlayer.play()
        }
      })
      // 当前播放时间改变
      avPlayer.on('timeUpdate', (time) => {
        this.value = time // 记录播放时间
      })
      avPlayer.url = `fd://${file.fd}` // 设置播放路径
      // 记录 avPlayer，用于 停止播放
      this.avPlayer = avPlayer
      this.playing = true // 播放状态
    } catch (e) {
      console.log('startPlay', JSON.stringify(e))
    }
  }

  // 停止播放
  stopPlay() {
    if (this.avPlayer) {
      // 停止播放
      this.avPlayer.stop()
      // 释放 avPlayer 和 关闭文件
      this.avPlayer.release()
      this.playing = false
    }
  }

这样我们就完成了一个简单的播放功能。