封装一个录音声音振动效果的组件
目标：根据声音的大小实现声音振动特效
实现步骤：
- 通过 getAudioCapturerMaxAmplitude 观察音频区间
- 封装振动组件，通过声音振幅数据实现振动效果
落地代码：
1）获取振幅数据，出入振动组件 AudioPage.ets
timer?: number
@State maxAmplitude: number = 0
// startRecord 4. 每100ms获取一下声音振幅
this.timer = setInterval(async () => {
this.maxAmplitude = await avRecorder.getAudioCapturerMaxAmplitude()
logger.debug('startRecord', this.maxAmplitude.toString())
}, 100)
// stopRecord 清理定时器
clearInterval(this.timer)
AudioBoComp({ maxAmplitude: this.maxAmplitude })
2）实现振动组件 Audio/AudioBoComp.ets
@Component
struct AudioBoComp {
@Prop @Watch('onChange') maxAmplitude: number
@State per: number = 0
onChange() {
animateTo({ duration: 100 }, () => {
if (this.maxAmplitude < 500) {
this.per = 0
} else if (this.maxAmplitude > 30000) {
this.per = 1
} else {
this.per = this.maxAmplitude / 30000
}
})
}
build() {
Row({ space: 5 }) {
ForEach(Array.from({ length: 30 }), () => {
Column()
.layoutWeight(1)
.height(this.per * 100 * Math.random())
.backgroundColor($r('app.color.common_blue'))
})
}
.width('100%')
.height(100)
}
}