OpenHarmony实战开发-如何实现语音录制和声音动效。

介绍

本示例使用AVrecord录制音频和AVrecord的getAudioCapturerMaxAmplitude接口获取振幅实现UI动效;使用AVplayer播放音频

效果图预览

使用说明

1. 按住按钮开始录音。
2. 上划取消录制。
3. 录制完成后点击消息框可播放录音。

实现思路

1.利用组合手势来实现音频录制与取消录制。

build() {
  Column() {
    Button($r('app.string.button')) 
      .gesture(
        GestureGroup(GestureMode.Sequence,
          LongPressGesture()
            .onAction( () => {
              this.AVrecord.startRecordingProcess();
            })
            .onActionEnd( () => {
              this.AVrecord.stopRecordingProcess();
            }),
          PanGesture()
            .onActionStart( () => {
              clearInterval(this.count);
            })
            .onActionEnd( () => {
              this.AVrecord.stopRecordingProcess();
            })
        )
          .onCancel( () => {
            this.AVrecord.startRecordingProcess();
          })
      )
    }
}

2.在音频录制的时候通过getAudioCapturerMaxAmplitude获取声音振幅使UI变化。

async
startRecordingProcess()
{
  if (this.avRecorder !== undefined) {
    await this.avRecorder.release();
    this.avRecorder = undefined;
  }
  // 1.创建录制实例
  this.avRecorder = await media.createAVRecorder();
  this.setAudioRecorderCallback();
  // 2.获取录制文件fd赋予avConfig里的url；参考FilePicker文档
  const context = getContext(this);
  const path = context.filesDir;
  const filepath = path + '01.mp3';
  const file = fs.openSync(filepath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
  const fdNumber = file.fd;
  this.avConfig.url = 'fd://' + fdNumber;
  // 3.配置录制参数完成准备工作
  await this.avRecorder.prepare(this.avConfig);
  // 4.开始录制
  await this.avRecorder.start();
  // 获取最大振幅
  this.time = setInterval(() => {
    this.avRecorder!.getAudioCapturerMaxAmplitude((_: BusinessError, amplitude: number) => {
      this.maxAmplitude = amplitude;
    });
  }, Const.COLUMN_HEIGHT);
}

Button($r('app.string.button'))
  .gesture(
    GestureGroup(GestureMode.Sequence,
      LongPressGesture()
        .onAction(() => {
          // 获取时间戳
          this.timeStart = Math.floor(new Date().getTime() / Const.ANIMATION_DURATION);
          this.flag2 = Const.OPACITY_FALSE;
          this.isListening = !this.isListening;
          this.flag = Const.OPACITY_TRUE;
          this.AVrecord.startRecordingProcess();
          // 每隔100ms获取一次振幅
          this.count = setInterval(() => {
            if (this.AVrecord.maxAmplitude > Const.MIN_AMPLITUDE) {
              this.maxNumber = (this.AVrecord.maxAmplitude) / Const.MAX_AMPLITUDE * Const.COLUMN_HEIGHT;
              this.minNumber = (this.AVrecord.maxAmplitude) / Const.MAX_AMPLITUDE * Const.COLUMN_HEIGHT - Const.HEIGHT_MIN;
            } else {
              this.maxNumber = Const.OPACITY_FALSE;
              this.minNumber = Const.OPACITY_FALSE;
            }
            if (this.isListening) {
              animateTo({ duration: Const.ANIMATION_DURATION, curve: Curve.EaseInOut }, () => {
                this.yMax = this.maxNumber;
                this.yMin = this.minNumber;
              })
            }
          }, Const.SET_INTERVAL_TIME);
        })
        .onActionEnd(() => {
          clearInterval(this.count);
          this.flag2 = Const.OPACITY_TRUE;
          this.yMax = Const.OPACITY_FALSE;
          this.yMin = Const.OPACITY_FALSE;
          this.AVrecord.stopRecordingProcess();
        }),
      // 上划取消
      PanGesture()
        .onActionStart(() => {
          clearInterval(this.count);
        })
        .onActionEnd(() => {
          this.isListening = false;
          animateTo({ duration: Const.OPACITY_FALSE }, () => {
            this.yMax = Const.OPACITY_FALSE;
            this.yMin = Const.OPACITY_FALSE;
          })
          this.flag = Const.OPACITY_FALSE;
          this.flag2 = Const.OPACITY_FALSE;
          this.AVrecord.stopRecordingProcess();
        })
    )
      .onCancel(() => {
        // 获取结束时间戳并计算出手势持续时间
        this.timeEnd = Math.floor(new Date().getTime() / Const.ANIMATION_DURATION);
        this.timeAv = this.timeEnd - this.timeStart;
        clearInterval(this.count);
        this.isListening = false;
        animateTo({ duration: Const.OPACITY_FALSE }, () => {
          this.yMax = Const.OPACITY_FALSE;
          this.yMin = Const.OPACITY_FALSE;
        });
        this.flag = Const.OPACITY_FALSE;
        this.flag2 = Const.OPACITY_TRUE;
        this.AVrecord.startRecordingProcess();
      })
  )
build()
{
  Row
  ({ space: 5 })
  {
    ForEach(this.arr, (_:number) => {
      Column()
        .width(this.x)
        .height(Math.floor(Math.random() * (this.yMin - this.yMax + Const.ONE) + this.yMax))
    }, (index: number) => index.toString())
  }
  ...
}

3.使用AVplayer播放已录制的音频。

Image($r('app.media.icon'))
  .width($r('app.integer.width_image'))
  .height($r('app.integer.height_image'))
  .onClick( () => {
    this.AVplaer.avPlayerUrlDemo();
  } )

工程结构&模块类型

normalcaptu                                      // har类型
|---src
|   |---main
|   |     |---ets
|   |     |  |---common                        
|   |        |    |---CommonConstants.ets       // 常量定义 
|   |     |  |---pages                          
|   |        |    |---Index.ets                 // 主页面

模块依赖

路由模块注册路由。

如果大家还没有掌握鸿蒙，现在想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

OpenHarmony APP应用开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3