HarmonyOS Next-＞鸿蒙修仙传之我要录音 -＞ AvRecorder

结果图：

 

要想录音，得开启录音权限副本：

       1. 在module.json5里配置麦克风权限：

1. "requestPermissions": [
2.       {
3.         "name": "ohos.permission.MICROPHONE",
4.         "usedScene": {},
5.         "reason": "$string:MICROPHONE_use_reason"
6.       }
7. ]

复制代码

        2. 麦克风权限是用户级权限，必要向用户申请，可以用上篇封装的请求权限工具发起申请。
开启/关闭录音要借助音频工具：AVRecorder 

1. /**
2.   * 开始录音
3. */
4. async startRecord() {
5.     // 创建音频接收对象
6.     const avRecorder = await media.createAVRecorder()
7.     const ctx = getContext(this) // 获取上下文
8.     const filePath = ctx.filesDir + '/' + Date.now() + '.m4a' // 创建文件路径
9.     const file = fileIo.openSync(filePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE) // 打开或创建文件
10.     this.fd = file.fd // 存到全局
11.     // 创建音频配置
12.     const avConfig: media.AVRecorderConfig = {
13.       audioSourceType: media.AudioSourceType.AUDIO_SOURCE_TYPE_MIC, // 音频输入源设置为麦克风
14.       profile: {
15.         audioBitrate: 100000, // 音频比特率
16.         audioChannels: 2, // 音频声道数
17.         audioCodec: media.CodecMimeType.AUDIO_AAC, // 音频编码格式，当前支持ACC，MP3，G711MU
18.         audioSampleRate: 48000, // 音频采样率
19.         fileFormat: media.ContainerFormatType.CFT_MPEG_4A, // 封装格式，当前支持MP4，M4A，MP3，WAV
20.       },
21.       url: `fd://${file.fd}`, // 参考应用文件访问与管理中的开发示例获取创建的音频文件fd填入此处
22.     }
23.     // 准备录音
24.     await avRecorder.prepare(avConfig)
25.     // 开始录音
26.     await avRecorder.start()
27.     // 把音频对象存到全局存到全局
28.     this.avRecorder = avRecorder
30.     // 持续监听声音的振幅
31.     this.timerId = setInterval(async () => {
32.       const res = await avRecorder.getAudioCapturerMaxAmplitude() // 获取声音振幅>数字
33.       this.maxAmplitude = res // 赋值到全局
34.     }, 100)
35.   }
36. /**
37.   * 结束录音
38. */
39. async stopRecord() {
40.     if (this.avRecorder) {
41.       await this.avRecorder.stop() // 停止录音
42.       await this.avRecorder.release() // 释放资源
43.       fileIo.closeSync(this.fd) // 关闭文件
44.       clearInterval(this.timerId) // 清除定时器
45.       this.maxAmplitude = 0 // 重置振幅
46.     }
47. }

复制代码

绑定对应的变乱分别调用录音和结束录音 

 振幅拿到了，现在要给它动态展示出来：

        循环30个柱子，高度参差不齐，随着振幅变 -> 监听振幅，盘算高度

1. // AudioBoComp组件
3. @Component
4. export struct AudioBoComp {
5.   @Prop @Watch('onChange') maxAmplitude: number // 振幅
6.   @State per: number = 0 // 高
7.   onChange() {
8.     // 过渡
9.     animateTo({ duration: 100 }, () => {
10.       if (this.maxAmplitude < 500) { // 500以下高度为零
11.         this.per = 0
12.       } else if (this.maxAmplitude > 30000) { // 30000以上高度为1
13.         this.per = 1
14.       } else { // 高度为振幅比最大高
15.         this.per = this.maxAmplitude / 30000
16.       }
17.     })
18.   }
20.   build() {
21.     Row({ space: 5 }) {
22.       // 循环30个柱子
23.       ForEach(Array.from({ length: 30 }), () => {
24.         Column()
25.           .layoutWeight(1)
26.           .height(this.per * 100 * Math.random()) // 高度按振幅 随机 这样才参差不齐
27.           .backgroundColor('#ff08a9be')
28.       })
29.     }
30.     .width('100%')
31.     .height(100)
32.   }
33. }

复制代码

我们把它封装成一个组件吧，以后还能直接用 

1. <strong>AudioBoComp({maxAmplitude: this.maxAmplitude})把振幅穿过去</strong>

复制代码

整体代码：

  录音页：

1. import { Permissions } from '@kit.AbilityKit';
2. import { permission } from '../utils'; // 上篇封装的权限工具
3. import { promptAction, router } from '@kit.ArkUI';
4. import { media } from '@kit.MediaKit';
5. import { fileIo } from '@kit.CoreFileKit';
6. import { AudioBoComp } from '../components'; // 波动组件
8. @Entry
9. @Component
10. struct AudioPage {
11.   // 1. 权限列表
12.   permissions: Permissions[] = ['ohos.permission.MICROPHONE']
13.   confirmConfig:  promptAction.ShowDialogOptions = {
14.     title: "温馨提示",
15.     message: "未授权使用麦克风将无法使用该面试录音功能，是否前往设置进行授权？",
16.     buttons: [
17.       { text: '离开', color: '#ccc' },
18.       { text: '去授权', color: $r('app.color.black') }
19.     ]
20.   } // 弹窗配置
22.   // 2. 音频接收对象
23.   avRecorder?: media.AVRecorder
24.   // 3. 写入的文件fd
25.   fd?: number
26.   // 4. 记录声音的振幅
27.   @State maxAmplitude: number = 0
28.   timerId = 0 // 定时器id
30.   async aboutToAppear() {
31.     // 进入改页面时，获取权限
32.     this.getPermission()
33.   }
35.   /**
36.    * 获取麦克风权限
37.    */
38.   async getPermission(){
39.     try {
40.       // 1. 第一次拉起授权
41.       const isOk1 = await permission.requestPermission(this.permissions)
42.       if(isOk1) return
43.       // 2. 弹窗再次确认
44.       const res = await promptAction.showDialog(this.confirmConfig)
45.       if(res.index === 1){
46.         // 3. 二次授权
47.         const isOk2 = await permission.permissionSetting(this.permissions)
48.         if(isOk2) return
49.       }
50.       // 授权都不通过，退出该页面
51.       router.back()
52.     } catch (e) {
53.       promptAction.showToast({message: '用户授权出现问题'})
54.       router.back()
55.     }
56.   }
58.   /**
59.    * 开始录音
60.    */
61.   async startRecord(){
62.     // 创建音频接收对象
63.     const avRecorder = await media.createAVRecorder()
64.     const ctx = getContext(this) // 获取上下文
65.     const filePath = ctx.filesDir + '/' + Date.now() + '.m4a' // 创建文件路径
66.     const file = fileIo.openSync(filePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE) // 打开或创建文件
67.     this.fd = file.fd // 存到全局
68.     // 创建音频配置
69.     const avConfig: media.AVRecorderConfig = {
70.       audioSourceType: media.AudioSourceType.AUDIO_SOURCE_TYPE_MIC, // 音频输入源设置为麦克风
71.       profile: {
72.         audioBitrate: 100000, // 音频比特率
73.         audioChannels: 2, // 音频声道数
74.         audioCodec: media.CodecMimeType.AUDIO_AAC, // 音频编码格式，当前支持ACC，MP3，G711MU
75.         audioSampleRate: 48000, // 音频采样率
76.         fileFormat: media.ContainerFormatType.CFT_MPEG_4A, // 封装格式，当前支持MP4，M4A，MP3，WAV
77.       },
78.       url: `fd://${file.fd}`, // 参考应用文件访问与管理中的开发示例获取创建的音频文件fd填入此处
79.     }
80.     // 准备录音
81.     await avRecorder.prepare(avConfig)
82.     // 开始录音
83.     await avRecorder.start()
84.     // 把音频对象存到全局存到全局
85.     this.avRecorder = avRecorder
87.     // 持续监听声音的振幅
88.     this.timerId = setInterval(async ()=>{
89.       const res = await avRecorder.getAudioCapturerMaxAmplitude() // 获取声音振幅
90.       this.maxAmplitude = res // 赋值到全局
91.     }, 100)
92.   }
93.   /**
94.    * 结束录音
95.    */
96.   async stopRecord(){
97.     if (this.avRecorder) {
98.       await this.avRecorder.stop() // 停止录音
99.       await this.avRecorder.release() // 释放资源
100.       fileIo.closeSync(this.fd) // 关闭文件
101.       clearInterval(this.timerId) // 清除定时器
102.       this.maxAmplitude = 0 // 重置振幅
103.     }
104.   }
106.   build() {
107.     Column({space: 5}){
108.       AudioBoComp({maxAmplitude: this.maxAmplitude})
109.       Button('开始录音')
110.         .onClick(()=>{
111.           this.startRecord()
112.         })
113.       Button('结束录音')
114.         .onClick(()=>{
115.           this.stopRecord()
116.         })
117.     }
118.     .justifyContent(FlexAlign.Center)
119.     .height('100%')
120.     .width('100%')
121.   }
122. }

复制代码

振幅组件： 

1. @Component
2. export struct AudioBoComp {
3.   @Prop @Watch('onChange') maxAmplitude: number // 振幅
4.   @State per: number = 0 // 高
5.   onChange() {
6.     // 过渡
7.     animateTo({ duration: 100 }, () => {
8.       if (this.maxAmplitude < 500) { // 500以下高度为零
9.         this.per = 0
10.       } else if (this.maxAmplitude > 30000) { // 30000以上高度为1
11.         this.per = 1
12.       } else { // 高度为振幅比最大高
13.         this.per = this.maxAmplitude / 30000
14.       }
15.     })
16.   }
18.   build() {
19.     Row({ space: 5 }) {
20.       // 循环30个柱子
21.       ForEach(Array.from({ length: 30 }), () => {
22.         Column()
23.           .layoutWeight(1)
24.           .height(this.per * 100 * Math.random()) // 高度按振幅 随机 这样才参差不齐
25.           .backgroundColor('#ff08a9be')
26.       })
27.     }
28.     .width('100%')
29.     .height(100)
30.   }
31. }

复制代码

   权限工具：

1. import { abilityAccessCtrl, Permissions } from '@kit.AbilityKit'
3. class Permission {
4.   // 申请权限
5.   async requestPermission(permissions: Permissions[]) {
6.     // 1. 创建权限管理对象
7.     const atManager = abilityAccessCtrl.createAtManager()
8.     // 2. 弹窗授权窗口
9.     const ctx = AppStorage.get<Context>('context')
10.     if (ctx) {
11.       const res =  await atManager.requestPermissionsFromUser(ctx, permissions)
12.       // 3. 判断用户是否授权
13.       const flag = res.authResults.every(item => item === abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED )
14.       return flag
15.     } else {
16.       return false
17.     }
18.   }
20.   // 二次申请
21.   async permissionSetting(permissions: Permissions[]) {
22.     const atManager = abilityAccessCtrl.createAtManager()
23.     const ctx = AppStorage.get<Context>('context')
24.     if (ctx) {
25.       const res = await atManager.requestPermissionOnSetting(ctx, permissions)
26.       const flag = res.every(item => item === abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED)
27.       return flag
28.     }
29.     return false
30.   }
31. }
33. export const permission = new Permission()

复制代码

天选之人

        

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。