鸿蒙应用开发中如何播放MP3音频资源(一个简单的播放器）_鸿蒙 实现音频循环播放

参考文档

AVPlayer
本文参考鸿蒙官方文档能理解更深刻，这篇文章只是辅助新手学习的文章。
目前使用API11 一些简单功能的播放器，根据这个进行讲解，最下面附带源码，我会在源码中注释讲解一些使用技巧，可以直接看源码。

1.使用说明

AVPlayer是什么？
AVPlayer是鸿蒙@kit.MediaKit下面的一个可以实现播放音频资源(mp3等)接口
使用之前需要导包

AVPlayer作用是什么？
使用AVPlayer可以播放对音频播放进行全流程控制：
创建AVPlayer ->设置播放资源 ->设置播放参数（循环播放）-> 播放控制（播放/暂停/跳转/停止）-> 重置 ->销毁资源

AVPlayer播放状态变化示意图
![在这里插入图片描述](https://img-blog.csdnimg.cn/d
irect/2099946cbf8e4e89aa9fbf7af41dcbab.png)

2.如何创建一个播放器

const avplay = await media.createAVPlayer()  //异步方式创建AVPlayer播放器实例
 avPlayer.on("stateChange", (state) => {
      if (state === "initialized") {
        //   表示avPlayer已经设置了播放源
        avPlayer.prepare()
      }

      if (state === "prepared") {
        //  表示avPlayer已经进入了准备播放状态，此时就可以通知播放了
        // 设置avPlayer循环播放音频
        avPlayer.loop = true
        avPlayer.play()
      }
    })
//   3. 设置播放源
//提供一个有道的单词资源路径，读者可以自行设置。
//！！！注意设置播放资源必须在监听事件之后。
avPlayer.url = 'http://dict.youdao.com/dictvoice?audio=' + this.wordEn + '&type=1 '
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

源码

import media from '@ohos.multimedia.media';
import { Logger } from './Logger';
@Entry
@Component
struct VoicePage {
  avplayer: media.AVPlayer = Object()
  @State total: number = 0
  @State value: number = 0
  @State voicedeep: number = 0.5
  @State loop: boolean = false
  @Builder
  Menu() {
    Menu() {
      MenuItem({ content: '0.75' })
        .onClick(() => {
          this.avplayer.setSpeed(media.PlaybackSpeed.SPEED_FORWARD_0_75_X)
        })
      MenuItem({ content: '1.00' })
        .onClick(() => {
          this.avplayer.setSpeed(media.PlaybackSpeed.SPEED_FORWARD_1_00_X)
        })
      MenuItem({ content: '1.25' })
        .onClick(() => {
          this.avplayer.setSpeed(media.PlaybackSpeed.SPEED_FORWARD_1_25_X)
        })
      MenuItem({ content: '1.75' })
        .onClick(() => {
          this.avplayer.setSpeed(media.PlaybackSpeed.SPEED_FORWARD_1_75_X)
        })
      MenuItem({ content: '2.00' })
        .onClick(() => {
          this.avplayer.setSpeed(media.PlaybackSpeed.SPEED_FORWARD_2_00_X)
        })
    }
  }
  async aboutToAppear() {
    this.getmp3('hello.mp3')
  }

  setUrl(name: string) {
  //这里的音频资源是放在rawfile文件夹中的.mp3文件，读者自己设置其他文件资源。
    const fd = getContext().resourceManager.getRawFdSync(name)
    //给播放器设置播放资源，上图有参考资料，使用的是fsSrc资源，不是网络资源->。
    //网络资源用url.
    this.avplayer.fdSrc = { fd: fd.fd, offset: fd.offset, length: fd.length }
  }

  async getmp3(sound: string) {
    const avplay = await media.createAVPlayer()
    this.avplayer = avplay
    this.avplayer.on('durationUpdate', (val) => {
      this.total = val
    })
    avplay.on('stateChange', (state) => {
      if (state == 'initialized') {
      //监听播放器状态，当监听都处于初始化状态时，播放器调用prepare（）变成就绪态
        avplay.prepare()
      }
    })
    this.setUrl(sound)
  }
  build() {
    Navigation() {
      Button('播放音乐')
        .onClick(() => {
          this.avplayer.play()
          this.avplayer.on('timeUpdate', (val) => {
            this.value = val
          })

        })
      Button('暂停')
        .onClick(() => {
          this.avplayer.pause()
        })
	//音量的voicedeep为[0,1] ,设的值不在这个范围就无效。
      Button('音量增大')
        .onClick(() => {
          if (this.voicedeep <= 0.9) {
            this.voicedeep += 0.1
          }
          this.avplayer.setVolume(this.voicedeep)
          this.avplayer.on('volumeChange', (val) => {
            Logger.info(val.toString())
          })
        })
      Button('音量减小')
        .onClick(() => {
          if (this.voicedeep >= 0.1) {
            this.voicedeep -= 0.1
          }
          this.avplayer.setVolume(this.voicedeep)
          this.avplayer.on('volumeChange', (val) => {
            Logger.info(val.toString())
          })
        })
      Button(this.loop == true ? '循环' : '不循环')
        .onClick(() => {
          this.loop = !this.loop
          this.avplayer.loop = this.loop
        })
      Button('下一首')
        .onClick(async () => {
          this.avplayer.reset()
          await this.getmp3('sound1.mp3')
          this.avplayer.on('stateChange', (val) => {
            if (val == 'initialized') {
              this.avplayer.prepare()
            }
            if (val == 'prepared') {
              this.avplayer.play()
            }
          })
        })
      Text('调整播放速率')
        .backgroundColor(Color.Pink)
        .padding(20)
        .bindMenu(this.Menu)
      Progress({ value: this.value, total: this.total, type: ProgressType.Ring, })
    }
    .titleMode(NavigationTitleMode.Mini)
    .title('声音页面')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124