HarmonyOS NEXT 语音录制和声音动效实现

最新推荐文章于 2024-06-24 14:21:23 发布

蜀道山QAQ

最新推荐文章于 2024-06-24 14:21:23 发布

阅读量1.1k

点赞数 10

分类专栏：鸿蒙鸿蒙项目鸿蒙实战案例文章标签： harmonyos 华为鸿蒙前端鸿蒙系统 android ArkTS

本文链接：https://blog.csdn.net/shudaoshanQAQ/article/details/137785901

版权

鸿蒙同时被 3 个专栏收录

631 篇文章 70 订阅

订阅专栏

鸿蒙实战案例

134 篇文章 10 订阅

订阅专栏

鸿蒙项目

31 篇文章 6 订阅

订阅专栏

本文介绍了如何在HarmonyOS应用中使用AVrecord进行音频录制，并利用getAudioCapturerMaxAmplitude获取振幅实时调整UI。同时展示了如何用AVplayer播放录制的音频，以及在开发过程中如何处理音频录制的用户交互和UI动画效果。

摘要由CSDN通过智能技术生成

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

效果图预览

使用说明

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

实现思路

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

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();
          })
      )
    }
}

在音频录制的时候通过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())
  }
  ...
}

使用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                 // 主页面

模块依赖

路由模块注册路由。

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料