01注意事項(xiàng)

DevEco Studio 4.0 Beta2（Build Version: 4.0.0.400）

OpenHarmony SDK API 9

創(chuàng)建工程類(lèi)型選擇Application

修改entry/build-profile.json5配置文件中的targets>runtimeOS為OpenHarmony，然后進(jìn)行Sync Now（同步）

02工程概述

PPI有聲是一款基于OpenHarmony API 9 開(kāi)發(fā)的，運(yùn)行于Purple Pi 開(kāi)發(fā)板（安裝OpenHarmony標(biāo)準(zhǔn)系統(tǒng)）的音頻播放應(yīng)用程序。

03場(chǎng)景化

智慧家居類(lèi)（電子門(mén)鈴，溫濕度顯示儀，屏顯燈控開(kāi)關(guān)等）

智慧辦公類(lèi)（打卡機(jī)，大屏顯示等）

智慧教育類(lèi)（電子班牌，校園大屏，電子講臺(tái)等）

04創(chuàng)建工程

Project name：工程名稱(chēng)

Bundle name：包名

Save location：工程存儲(chǔ)路徑

Compile SDK：編譯API版本

Compatible SDK：兼容的最新API版本

Module name：模塊名稱(chēng)

Model：模型

Enable Super Visual：是否啟用低代碼開(kāi)發(fā)

Device Type：設(shè)備類(lèi)型

Node：nodejs路徑

05媒體服務(wù)

媒體子系統(tǒng)為開(kāi)發(fā)者提供一套簡(jiǎn)單且易于理解的接口，使得開(kāi)發(fā)者能夠方便接入系統(tǒng)使用系統(tǒng)的媒體資源。

媒體子系統(tǒng)包含了音視頻相關(guān)媒體業(yè)務(wù)，提供以下常用共功能：

音視頻播放（AVPlayer）

音視頻錄制（AVRecorder）

5.1 AVPlayer概述

AVPlayer主要工作是將Audio/Video媒體資源（比如mp4/mp3/mkv/mpeg-ts等）轉(zhuǎn)碼為可供渲染的圖像或可聽(tīng)見(jiàn)的模擬信號(hào)，并通過(guò)輸出設(shè)備進(jìn)行播放。

使用AVPlayer可以實(shí)現(xiàn)端到端播放原始媒體資源，播放對(duì)的全流程包含：創(chuàng)建AVPlayer，設(shè)置播放資源，設(shè)置播放參數(shù) （音量/倍速/焦點(diǎn)模式），播放控制（播放/暫停/跳轉(zhuǎn)/停止），重置，銷(xiāo)毀資源。

開(kāi)發(fā)過(guò)程中開(kāi)發(fā)者可以通過(guò)AVPlayer的state屬性主動(dòng)獲取當(dāng)前狀態(tài)或使用on('stateChange')方法監(jiān)聽(tīng)狀態(tài)變化。若應(yīng)用在音頻播放器處于錯(cuò)誤狀態(tài)時(shí)執(zhí)行操作，系統(tǒng)可能會(huì)拋出異?；蛏善渌炊x的行為。

主：當(dāng)播放處于prepared/playing/paused/completed狀態(tài)時(shí)，播放引擎處于工作狀態(tài)，需要占用系統(tǒng)較多的運(yùn)行內(nèi)容。當(dāng)客戶端暫時(shí)不適用播放器時(shí)，調(diào)用reset()或release()回收內(nèi)存資源。

5.2開(kāi)發(fā)步驟

導(dǎo)入media模塊，調(diào)用createAVPlayer()方法創(chuàng)建AVPlayer實(shí)例，AVPlayer初始化idle狀態(tài)。

設(shè)置業(yè)務(wù)監(jiān)聽(tīng)事件，搭配全流程場(chǎng)景使用，如監(jiān)聽(tīng)播放器state屬性改變的stateChange；監(jiān)聽(tīng)播放器錯(cuò)誤信息的error；用于進(jìn)度條，監(jiān)聽(tīng)進(jìn)度條長(zhǎng)度，刷新資源時(shí)長(zhǎng)的durationUpdate等。

設(shè)置資源：設(shè)置屬性u(píng)rl，AVPlayer進(jìn)入initialized狀態(tài)

準(zhǔn)備播放：調(diào)用prepare()，AVPlayer進(jìn)入prepared狀態(tài)，此時(shí)可以獲取duration，設(shè)置音量。

音頻播控：播放play()，暫停pause()，跳轉(zhuǎn)seek()，停止stop()等操作。

調(diào)用reset()重置資源，AVPlayer重新進(jìn)入idle狀態(tài)，此時(shí)可更換播放源url。

調(diào)用release()銷(xiāo)毀實(shí)例，AVPlayer進(jìn)入released狀態(tài)，退出播放。

06構(gòu)建PPI有聲

6.1 準(zhǔn)備資源文件

音頻文件拷貝到resources/rawfile目錄

將拷貝到resources/base/mdiea目錄

音頻播放背景圖audio_bg.png

音頻播放旋轉(zhuǎn)圖audio.png

暫停ic_pause.svg

播放ic_play.svg

6.2 構(gòu)建UI頁(yè)面

整個(gè)UI以Flex彈性布局為主，子組件以列方式排列，分別為可旋轉(zhuǎn)的音頻播放控件，播放進(jìn)度條以及播放控制按鈕組成。

6.2.1 可旋轉(zhuǎn)的音頻播放控件

使用Stack堆疊布局容器為主，將旋轉(zhuǎn)控件置于背景圖之上。

Stack({alignContent: Alignment.Center }) {
Image($r('app.media.audio_bg'))
.width(200).height(200)
Image($r('app.media.audio'))
.width(100).height(100)
.backgroundColor(Color.White)
.borderRadius(50)
.rotate({angle: this.angleNum })
.animation({
duration: this.duration,
tempo:1,
curve: Curve.Linear,
iterations: -1,
playMode: PlayMode.Normal
})
}

6.2.2 進(jìn)度條

播放進(jìn)度由置于上部的播放時(shí)長(zhǎng)和總時(shí)長(zhǎng)，底部的播放進(jìn)度條組成，包裹在Column列容器中。

Column({ space:4}) {
Row() {
Text(this.msToS(this.currentProgress))
.fontSize(12)
.fontColor(0xc1c3c5)
Text(this.msToS(this.duration))
.fontSize(12)
.fontColor(0xc1c3c5)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
// 播放進(jìn)度條
Slider({
value:this.currentProgress,
min:0,
max:this.duration,
style: SliderStyle.OutSet
})
.showTips(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.currentProgress =value;
// 跳轉(zhuǎn)到指定位置播放
this.avPlayer.seek(value);
})
}
.width('90%')

6.2.3 播放控件

播放控件通過(guò)當(dāng)前AVPlayer的狀態(tài)判斷顯示播放/暫停圖標(biāo)按鈕。

Row({ space:10}) {
if(this.state ==='playing') {
//暫停
Image($r('app.media.ic_pause'))
.width(64).height(64)
.fillColor(0xff5722)
.onClick(()=>{
//暫停播放
this.avPlayer.pause().then(()=>{
this.angleNum =0;
})
})
}else{
//播放
Image($r('app.media.ic_play'))
.width(64).height(64)
.fillColor(0x00aaee)
.onClick(async () => {
if(this.avPlayer &&this.avPlayer.state ==="paused") {
this.avPlayer.play().then(()=>{
this.angleNum =360;
})
}else{
awaitthis.initAVPlayer();
}
})
}
}
.width('100%')
.justifyContent(FlexAlign.Center)

6.3 實(shí)現(xiàn)音頻播放

6.3.1 初始化AVPlayer

// 播放音頻AVPlayer實(shí)例
privateavPlayer: media.AVPlayer = undefined;

// 初始化AVPlayer
asyncinitAVPlayer(){
// 創(chuàng)建AVPlayer實(shí)例對(duì)象
this.avPlayer =awaitmedia.createAVPlayer();
// 創(chuàng)建狀態(tài)機(jī)變化回調(diào)函數(shù)
this.setAVPlayerCallback();

awaitthis.loadingResourceFile();
}

6.3.2 加載HAP包資源文件

// 加載HAP包資源文件
loadingResourceFile =async() => {
// 通過(guò)UIAbilityContext的resourceManager成員的getRawFd接口獲取媒體資源播放地址
letcontext = getContext(this)ascommon.UIAbilityContext;
letfileDir =awaitcontext.resourceManager.getRawFd("audio.wav");
// 為fdSrc賦值觸發(fā)initialized狀態(tài)機(jī)上報(bào)
this.avPlayer.fdSrc = fileDir;
}

6.3.3 注冊(cè)AVPlayer回調(diào)函數(shù)

// 注冊(cè)AVPlayer回調(diào)函數(shù)
setAVPlayerCallback =()=>{
// 狀態(tài)機(jī)變化回調(diào)函數(shù)
// state：表示當(dāng)前播放狀態(tài)
// reason：表示當(dāng)前播放狀態(tài)的切換原因
this.avPlayer.on('stateChange',async(state, reason) => {
this.state =this.avPlayer.state;
switch(state) {
case'initialized':
this.avPlayer.prepare().then(()=>{
// 音頻播放準(zhǔn)備完畢后，獲取音頻總時(shí)長(zhǎng)
this.duration =this.avPlayer.duration;
})
break;
case'prepared':
// 開(kāi)始播放
this.avPlayer.play().then(()=>{
// 設(shè)置圖標(biāo)開(kāi)始旋轉(zhuǎn)
this.angleNum =360;
})
break;
}
})

// 播放錯(cuò)誤回調(diào)函數(shù)
this.avPlayer.on('error',(err) =>{
console.error(`Error happened. Cause:${JSON.stringify(err)}`);
})
// 監(jiān)聽(tīng)資源播放當(dāng)前時(shí)間回調(diào)函數(shù)
this.avPlayer.on('timeUpdate',(time:number) =>{
if(this.avPlayer.state ==='completed') {
this.currentProgress =0;
this.duration =0;
this.angleNum =0;
}else{
this.currentProgress = time;
}
})
}

07效果預(yù)覽