纯血鸿蒙APP实战开发——语音录制和声音动效实现

介绍

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

效果图预览

使用说明

实现思路

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

build() {
  Column() {
    Button($r('app.string.voice_record_dynamic_effect_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变化。
   (1)在录制音频的时候通过getAudioCapturerMaxAmplitude获取振幅；
   (2)对振幅做占比运算，随机取最大值与最小值之间的值（Math.floor(Math.random()）来使column的高度随机变化；

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.voice_record_dynamic_effect_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.voice_record_dynamic_effect_icon'))
  .width($r('app.integer.voice_record_dynamic_effect_width_image'))
  .height($r('app.integer.voice_record_dynamic_effect_height_image'))
  .onClick( () => {
    this.AVplaer.avPlayerUrlDemo();
  } )

工程结构&模块类型

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

写在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：

• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 想要获取更多完整鸿蒙最新学习知识点，请移步前往小编：