亲宝软件园·资讯

展开

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

codezha 人气:0

最近接到这样一个需求，要求实现录制、试听、上传音频功能，选择的是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>
        <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 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="voicePointer" style="left:{{currentLeft}}rpx"></view>
   </view>
  </view>
  <view class="handleView" wx:if="{{showhandle1}}">
   <view wx:if="{{!voiceState}}" class="CircleBtn green" bindtap="startRecord">开始</view>
   <view wx:if="{{voiceState}}" class="CircleBtn red" bindtap="shutRecord">录好了</view>
  </view>
  <view class="serviceList" wx:if="{{showhandle2}}">
   <view class="CircleBtn red" bindtap="listen" bindtap="listenRecord">试听</view>
   <view wx:if="{{!uploadState}}" class="CircleBtn green" bindtap="uploadVoice">上传</view>
   <view wx:if="{{uploadState}}" class="CircleBtn blue">上传中</view>
  </view>
  <view style="text-align: center;" wx:if="{{showhandle2}}" bindtap="reRecord">重新录制</view>
 </view>
</view>

js文件

let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的高度
let screenWidth = wx.getSystemInfoSync().screenWidth
let screenHeight = wx.getSystemInfoSync().screenHeight
let contentHeight = ((windowHeight / screenWidth) * 750 - 184 - 166) + "rpx";
const recorderManager = wx.getRecorderManager()
const backgroundAudioManager = wx.getBackgroundAudioManager()
Page({
 /**
  * 页面的初始数据
  */
 data: {
  startClick:false,
  contentHeight: contentHeight,
  voiceState:false,
  tempFilePath:'',
  recordingTimeqwe:0,//录音计时
  setInter:"",//录音名称
  isplay:true, //播放状态 true--播放中 false--暂停播放
  uploadState:false,
  showhandle1:true,
  showhandle2:false,
  showWaveView:false,
  currentLeft:10,
  currentTime:'00'
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  this.initRecord()
 },
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
 },
 initRecord:function(){
  recorderManager.onStart(() => {
   console.log('开始录音')
  })
  recorderManager.onPause(() => {
   console.log('暂停录音')
  })
  recorderManager.onStop((res) => {
   clearInterval(this.data.setInter);
   this.setData({voiceState:true,currentLeft:10})
   console.log('结束录音', res)
   const { tempFilePath } = res
   this.data.tempFilePath = tempFilePath
  })
  recorderManager.onFrameRecorded((res) => {
   const { frameBuffer } = res
   console.log('frameBuffer.byteLength', frameBuffer.byteLength)
  })
 },
 recordingTimer:function(){
  var that = this;
  //将计时器赋值给setInter
  this.data.setInter = setInterval(
   function () {
    let time = that.data.recordingTimeqwe + 1;
    if(time>10){
     wx.showToast({
      title: '录音时长最多10s',
      duration:1500,
      mask:true
     })
     clearInterval(that.data.setInter);
     that.shutRecord();
     return;
    }
    // console.log(time);
    let currentTime = time < 10 ? '0'+time : time;
    that.setData({
     recordingTimeqwe: time,
     currentTime:currentTime,
     currentLeft:that.data.currentLeft + 65
    })
   }
   , 1000); 
 },
 startRecord:function(){
  if(this.data.startClick){
   return
  }
  this.data.startClick = true
  const options = {
   duration: 10000,
   sampleRate: 44100,
   numberOfChannels: 1,
   encodeBitRate: 192000,
   format: 'aac',
   frameSize: 50
  }
  // 开始倒计时
  this.recordingTimer()
  // 开始录音
  recorderManager.start(options)
 },
 shutRecord:function(){
  recorderManager.stop()
  this.setData({showhandle1:false,showhandle2:true,currentTime:'00'})
 },
 listenRecord:function(e){
  // 试听
  let isplay = e.currentTarget.dataset.isplay;
  backgroundAudioManager.title = '试听欢迎语'
  backgroundAudioManager.src = this.data.tempFilePath
  this.setData({
   showWaveView:true,
   currentLeft:10,
   currentTime:'00'
  })
  backgroundAudioManager.onPlay(() => {
   console.log("音乐播放开始")
  })
  backgroundAudioManager.onEnded(() => {
   console.log("音乐播放结束")
   clearInterval(this.data.setInter1)
   this.setData({currentLeft:10,showWaveView:false,currentTime:'00'})
  })
  backgroundAudioManager.play()
  this.data.setInter1 = setInterval(() => {
   let time = parseInt(this.data.currentTime) + 1
   let currentTime = time < 10 ? '0'+time : time;
   // console.log(currentTime)
   this.setData({
    currentLeft:this.data.currentLeft + 65,
    currentTime:currentTime
   })
  }, 1000); 
 },
 reRecord:function(){
  clearInterval(this.data.setInter1)
  this.setData({
   showhandle1:true,
   showhandle2:false,
   voiceState:false,
   tempFilePath:'',
   showWaveView:false,
   startClick:false,
   currentLeft:10,
   recordingTimeqwe:0,
   currentTime:'00'
  })
 },
 uploadVoice:function(){
  let that = this
  this.setData({uploadState:true})
  wx.uploadFile({
   url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
   filePath: this.data.tempFilePath,
   name: 'file',
   header:{
    "Content-type":"multiply/form-data"
   },
   formData: {
    'time': this.data.recordingTimeqwe
   },
   success (res){
    console.log('上传成功')
   },
   fail (res){
    console.log('上传失败')
    that.setData({uploadState:false})
   }
  })
 },
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 },
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 },
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
 },
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 },
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 },
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 }
})

css文件

.servicePage {
 font-family: "PingFangSC-Regular";
}
.top {
 font-size: 34rpx;
 font-family: "PingFangSC-Medium";
 color: #fff;
 padding-left: 60rpx;
 display: flex;
 align-items: center;
 height: 150rpx;
}
.content {
 border-radius: 36rpx 36rpx 0 0;
 background: #fff;
 padding: 16rpx 30rpx;
 overflow-y: scroll;
}
.allService .title {
 text-align:center;
}
.serviceList {
 margin-top:300rpx;
 display: flex;
 justify-content: space-between;
 padding: 0 16rpx;
}
.handleView{
 margin-top:300rpx;
 display: flex;
 /* align-items: center; */
 justify-content: center;
 /* justify-content: space-between; */
 padding:0 100rpx;
}
.CircleBtn{
 width:100rpx;
 height:100rpx;
 color:#fff;
 text-align:center;
 line-height:100rpx;
 border-radius:50%;
 font-size:28rpx;
}
.green{
 background-color:#3ed3ca;
}
.red{
 background-color:red;
}
.blue{
 background-color: blue;
}
.voiceLine{
 position: relative;
 background: #eee;
 height:40px;
 padding:0 10rpx;
 overflow: hidden;
}
.voicePointer{
 width:2rpx;
 height:100rpx;
 background: cornflowerblue;
 position: absolute;
 top:0;
 left:10rpx;
}
.voiceBox{
 display: flex;
 align-items: center;
 height:40px;
}
.line1{
 height:1px;
 background: cornflowerblue;
 width:100rpx;
}
.Wave2{
 height:40px;
}
.Wave3{
 height:40px;
}
.voiceWave{
 display: flex;
 align-items: flex-end;
 height:20px;
}
.voiceWave1{
 display: flex;
 align-items:flex-start;
 height:20px;
}
.auItem{
 width:1px;
 margin-right:4rpx;
 background: cornflowerblue;
 height:2px;
}
.au1{
 height:8px;
 animation: audio1 1s linear .1s infinite ;
}
.au2{
 height:6px;
 animation: audio2 1s linear .1s infinite ;
}
.au3{
 height:4px;
 animation: audio3 1s linear .1s infinite ;
}
.au4{
 height:8px;
 animation: audio4 .5s linear .2s infinite ;
}
.au5{
 height:6px;
 animation: audio5 .5s linear .5s infinite ;
}
.au6{
 height:4px;
 animation: audio6 .5s linear .2s infinite ;
}
@keyframes audio1 {
 from{height:8px;}
 to{height:6px;}
}
@keyframes audio2 {
 from{height:6px;}
 to{height:4px;}
}
@keyframes audio3 {
 from{height:4px;}
 to{height:2px;}
}
@keyframes audio4 {
 from{height:6px;}
 to{height:8px;}
}
@keyframes audio5 {
 from{height:4px;}
 to{height:6px;}
}
@keyframes audio6 {
 from{height:2px;}
 to{height:4px;}
}
.serviceList .box {
 width: 200rpx;
 height: 220rpx;
 background: #eee;
 padding: 4rpx;
 border-radius: 8rpx;
}
.serviceList .box view.free{
 position: absolute;
 left:-10rpx;
 top:0;
 width:108rpx;
 height:42rpx;
 line-height: 42rpx !important;
 padding:0;
}
.serviceList .box view.free text{
 display: inline-block;
 color:#fff;
 position: absolute;
 font-size: 24rpx;
 text-align: center;
 width:108rpx;
 top:-4rpx;
}
.box .free image{
 width:108rpx;
 height:42rpx;
}
.serviceList .box view:first-child {
 height: 80rpx;
 line-height: 80rpx;
 font-size: 30rpx;
 text-align: center;
}
.serviceList .box view:last-child {
 font-family: "PingFangSC-Semibold";
 border-radius: 0 0 8rpx 8rpx;
 height: 140rpx;
 background: #fff;
 font-size: 72rpx;
 text-align: center;
 line-height: 135rpx;
 vertical-align: top;
 position: relative;
}
.serviceList .box view:last-child text {
 font-size: 26rpx;
}
.box.active {
 background: #ffd458;
}
.box.active view:last-child {
 background: #fffbea;
}
.bottom {
 position: fixed;
 width: 100%;
 height: 184rpx;
 background: #fff;
 box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.10);
 bottom: 0;
 left: 0;
 display: flex;
 justify-content: space-between;
 align-items: center;
 box-sizing: border-box;
 padding: 0 30rpx 60rpx 30rpx;
}
.bottom .left view.all {
 font-size: 34rpx;
 font-family: "PingFangSC-Semibold";
 line-height: 48rpx;
 display: flex;
 align-items: center;
 margin-bottom: 10rpx;
}
.bottom .left view.agree {
 font-size: 24rpx;
 display: flex;
 align-items: center;
}
.bottom .left view.agree text {
 color: #bbb;
}
.bottom .left view text.colorBlue {
 color: #419bf9;
}
.bottom .right {
 width: 200rpx;
 background: #3ed3ca;
 border-radius: 40rpx;
 line-height: 80rpx;
 text-align: center;
 font-size: 30rpx;
 color: #fff;
}
.rightsInfo {
 margin-top: 60rpx;
 padding-right: 16rpx;
}
.rightsInfo::before {
 display: table;
 content: '';
}
.rightsInfo .title {
 font-size: 32rpx;
 display: flex;
 align-items: center;
 letter-spacing: 0.26px;
}
.rightsInfo .title image {
 width: 40rpx;
 height: 40rpx;
 margin-right: 14rpx;
}
.rightsInfo .rightsList {
 display: flex;
 align-items: center;
 margin-top: 40rpx;
}
.rightsInfo .rightsList .left {
 width: 80rpx;
 height: 80rpx;
 margin-right: 20rpx;
}
.rightsInfo .rightsList .left image {
 width: 80rpx;
 height: 80rpx;
}
.rightsInfo .rightsList .right .rightTitle {
 font-family: "PingFangSC-Medium";
 font-size: 30rpx;
 color: #333;
 letter-spacing: 0.24px;
 line-height: 24px;
}
.rightsInfo .rightsList .right .rightDes {
 font-size: 24rpx;
 color: #a5a5a5;
 letter-spacing: 0;
}

总结

加载全部内容
相关教程
猜你喜欢
用户评论