最近接到这样一个需求，要求实现录制、试听、上传音频功能，选择的是getBackgroundAudioManager,声音录制和播放波形图是用css实现的，效果图及详细设计代码如下：

xml文件

<view class="servicePage"> <view style="width:100%;height:320rpx;position:absolute;z-index:-1;"> <image style="width:100%" src="../../img/bg.png" mode='widthFix'></image> </view> <view class="content" style="height:{{contentHeight}}"> <view class="allService"> <view class="title"> 录制提示 </view> </view> <view class="voiceView"> <view class="voiceTime" style="text-align: center;">00:00:<span>{{currentTime}}</span></view> <view class="voiceLine"> <view class="voiceBox" wx:if="{{!showWaveView}}"> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave2"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave3"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave2"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave2"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave3"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> </view> <view class="voiceBox" wx:if="{{showWaveView}}"> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave2"> <view class="voiceWave"> <view class="auItem au1"></view> <view class="auItem au1"></view> <view class="auItem au2"></view> <view class="auItem au2"></view> <view class="auItem au3"></view> <view class="auItem au3"></view> <view class="auItem au3"></view> </view> <view class="voiceWave1"> <view class="auItem au4"></view> <view class="auItem au4"></view> <view class="auItem au5"></view> <view class="auItem au5"></view> <view class="auItem au6"></view> <view class="auItem au6"></view> <view class="auItem au6"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave3"> <view class="voiceWave"> <view class="auItem au1"></view> <view class="auItem au1"></view> <view class="auItem au1"></view> <view class="auItem au1"></view> <view class="auItem au2"></view> <view class="auItem au2"></view> <view class="auItem au3"></view> <view class="auItem au3"></view> <view class="auItem au3"></view> <view class="auItem au3"></view> <view class="auItem au3"></view> </view> <view class="voiceWave1"> <view class="auItem au4"></view> <view class="auItem au4"></view> <view class="auItem au4"></view> <view class="auItem au4"></view> <view class="auItem au5"></view> <view class="auItem au5"></view> <view class="auItem au6"></view> <view class="auItem au6"></view> <view class="auItem au6"></view> <view class="auItem au6"></view> <view class="auItem au6"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave2"> <view class="voiceWave"> <view class="auItem au1"></view> <view class="auItem au1"></view> <view class="auItem au2"></view> <view class="auItem au2"></view> <view class="auItem au3"></view> <view class="auItem au3"></view> <view class="auItem au3"></view> </view> <view class="voiceWave1"> <view class="auItem au4"></view> <view class="auItem au4"></view> <view class="auItem au5"></view> <view class="auItem au5"></view> <view class="auItem au6"></view> <view class="auItem au6"></view> <view class="auItem au6"></view> </view> </view> <view class="Wave2"> <view class="voiceWave"> <view class="auItem au1"></view> <view class="auItem au1"></view> <view class="auItem au2"></view> <view class="auItem au2"></view> <view class="auItem au3"></view> <view class="auItem au3"></view> <view class="auItem au3"></view> </view> <view class="voiceWave1"> <view class="auItem au4"></view> <view class="auItem au4"></view> <view class="auItem au5"></view> <view class="auItem au5"></view> <view class="auItem au6"></view> <view class="auItem au6"></view> <view class="auItem au6"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave1"> <view class="voiceWave"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view><view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> <view class="voiceWave1"> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> <view class="auItem"></view> </view> </view> <view class="Wave3"> <view class="voiceWave"> <view class="auItem au1"></view> <view class="auItem au1"></view> <view class="auItem au1"></view> <view class="auItem au1"></view> <view class="auItem au2"></view