介绍
本示例使用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)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05
《鸿蒙开发学习手册》:
如何快速入门:https://qr21.cn/FV7h05
- 基本概念
- 构建第一个ArkTS应用
- ……
开发基础知识:https://qr21.cn/FV7h05
- 应用基础知识
- 配置文件
- 应用数据管理
- 应用安全管理
- 应用隐私保护
- 三方应用调用管控机制
- 资源分类与访问
- 学习ArkTS语言
- ……
基于ArkTS 开发:https://qr21.cn/FV7h05
- Ability开发
- UI开发
- 公共事件与通知
- 窗口管理
- 媒体
- 安全
- 网络与链接
- 电话服务
- 数据管理
- 后台任务(Background Task)管理
- 设备管理
- 设备使用信息统计
- DFX
- 国际化开发
- 折叠屏系列
- ……
鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH
鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH
1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向