最近接到这样一个需求，要求实现录制、试听、上传音频功能，选择的是getBackgroundAudioManager,声音录制和播放波形图是用css实现的，效果图及详细设计代码如下：
xml文件
<view> <view> <image src="" mode='widthFix'></image> </view> <view> <view> <view> 录制提示 </view> </view> <view> <view>00:00:<span>{{currentTime}}</span></view> <view> <view wx:if="{{!showWaveView}}"> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> </view> <view wx:if="{{showWaveView}}"> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> <view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> </view> </view> <view></view> </view> </view> <view wx:if="{{showhandle1}}"> <view wx:if="{{!voiceState}}" bindtap="startRecord">开始</view> <view wx:if="{{voiceState}}" bindtap="shutRecord">录好了</view> </view> <view wx:if="{{showhandle2}}"> <view bindtap="listen" bindtap="listenRecord">试听</view> <view wx:if="{{!uploadState}}" bindtap="uploadVoice">上传</view> <view wx:if="{{uploadState}}">上传中</view> </view> <view wx:if="{{showhandle2}}" bindtap="reRecord">重新录制</view> </view> </view>
js文件