微信小程序实现录制、试听、上传音频功能（带波形图）

微信小程序实现录制、试听、上传音频功能（带波形图）微信小程序实现录制、试听、上传音频功能（带波形图）

主要介绍了微信小程序实现录制、试听、上传音频功能（带波形图）,本文通过实例代码给大家介绍的非常详

细，具有一定的参考借鉴价值，需要的朋友可以参考下

最近接到这样一个需求，要求实现录制、试听、上传音频功能，选择的是getBackgroundAudioManager,声音录制和播放波形

图是用css实现的，效果图及详细设计代码如下：

xml文件

<view class="servicePage">

<view style="width:100%;height:320rpx;position:absolute;z-index:-1;">

</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="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="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 class="auItem"></view>

</view>

<view class="voiceWave1">

<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 class="auItem"></view>

</view>

</view>

<view class="Wave1">

<view class="voiceWave">

<view class="auItem"></view>

<view class="auItem"></view>