参考文档
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 '
源码
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('声音页面')
}
}