首页 > 编程开发 > JavaScript

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

来自：互联网
时间：2020-05-27
阅读：
免费资源网 - https://freexyz.cn/

最近接到这样一个需求，要求实现录制、试听、上传音频功能，选择的是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;
}
免费资源网 - https://freexyz.cn/
微信
最新文章 相关文章

react组件中debounce防抖功能失效问题解决办法

目录一、问题背景二、解决办法三、拓展一、问题背景import { debounce } from 'lodash'; const [searchKey, setSearchKey] = useState('');// 防抖函数 const debounceLi

2024-11-18 10:46:21

在 React 项目中 Editable Table 的实现

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。本文作者：佳岚可编辑表格在数栈产品中是一种

2024-08-08 21:54:40

神奇的JavaScript弱等价类型转换

JavaScript语言特性 - 类型转换JavaScript这门语言的类型系统从来没有它表面看起来的那样和善，虽然比起Java、C#等一众强类型语言，它的弱类型使用起来似乎是如此便利，但正因为

2024-06-12 11:51:29

vue+element-ui表格自定义列模版的实现

目录前言一、为什么要自定义表列模版？二、实现步骤1.封装表格组件2.父组件引用总结前言日前vue3项目中用element-ui表格封装一个组件，有自定义表列格式的需求，做完后顺手总结一

2024-06-10 00:14:50

webpack打包后index.html引用文件地址问题小结

在前端开发中，src 属性指定的相对路径是相对于当前 HTML 文件的路径，而不是相对于网站的根目录。这种相对路径的解析方式是浏览器的行为。当浏览器解析 HTML 文件中的 <script

2024-06-10 00:14:48

vue跳转时根据url锚点(#xxx)实现页面内容定位的方法

目录介绍一、实现原理二、代码(vue3 setup)三、演示：四、结束介绍本前端仔在做页面跳转的时候，被要求跳转到页面时候，把对应部分的内容自动滚动到顶部~我一开始想到的就是根据

2024-06-10 00:14:46

基于vue3+TypeScript实现一个简易的Calendar组件

目录功能分析功能实现初始化组件分析具体操作Calendar / CalendarCom.vueCalendar / CalendarMonth.vueCalendar / HeaderCom.vue小结总结功能分析目前学到功能有以下几点日

2024-06-10 00:14:43

vue3项目打包成apk(android)详细图文教程

目录一、打包vue3项目1、打包2、解决打包后的文件的白屏问题。二、打包成apk1、创建“5+App”项目2、打包文件移动3、生成apk文件三、生成apk附：vue项目打包时报错

2024-06-10 00:14:40

vue路由懒加载工作原理

Vue路由懒加载是一种优化技术，旨在减少应用程序的初始加载时间并提高性能。具体来说，它允许我们在用户实际需要访问某个路由时，才加载对应的组件代码，而不是在应用程序启动时一

2024-06-10 00:14:37

vue2项目使用exceljs多表头导出功能详解

目录前言一、插件安装二、数据准备三、插件引入四、导出前数据处理1、按exceljs格式创建导出函数2、表头及列宽数据预处理2.1 处理逻辑3、单元格样式处理函数4、表头数据填

2024-06-10 00:14:35

使用JavaScript截取视频特定帧的实现方法

目录背景1. 监听文件选择2. 捕获视频帧3. 绘制视频帧4. 实现效果结论背景在网页开发中，我们经常需要对媒体文件进行处理，其中包括视频文件。有时候，我们可能需要从视频中提取特

2024-06-10 00:14:33

Node+Express连接MySQL实现增删改查功能

一、在项目中安装mysql 和 expresscnpm install mysql express --save二、示例代码const express = require("express"); const app = express(); const mysql = require("m

2024-06-10 00:14:31

前端报错npm ERR! cb() never called!问题解决办法

目录1.问题描述1.1使用npm install后报错2.解决问题过程2.1看网上大部分的解决方式是：2.2网上还有部分的解决方式是：2.2.1如果你不幸的按照网上使用npm uninstall -g npm升级

2024-06-10 00:14:29

js跨域的几种解决方案

目录一、什么是跨域？二、跨域解决方案方案一：jsonp （json with padding）方案二：CORS (CROSS-Origin Resource Sharing 跨域资源共享)和跨域CORS有关的几个请求头和响应头请求头

2024-06-10 00:14:25

Vue图片懒加载之Vue-Lazyload的使用

目录一、什么叫懒加载二、懒加载的优点三、为什么使用懒加载懒加载原理是什么四、vue中如何实现懒加载五、js---懒加载的实现步骤？懒加载代码实现方式一：原生js方式二： getB

2024-06-10 00:14:22

解决JavaScript精度问题的常见方法

目录引言解决方案一、使用整数进行计算二、使用库函数三、四舍五入优缺点分析1、整数计算方法2、使用库函数方法3、四舍五入方法结论引言在 JavaScript 中，处理浮点数时经常

2024-06-10 00:14:18

使用JS代码实现页面添加水印的方法详解

目录一、水印概括1. 添加水印的好处2. 添加水印的坏处二、技术方案1. watermark 第三方库2. JS 简单实现水印功能三、水印功能实现1. 水印功能需求2. 功能实现3. 步骤解析3.

2024-06-10 00:14:16

微信小程序中实现自定义Navbar方法详解

目录前言StatusBar高度TitleBar高度编写Navbar组件使用最终效果前言自定义 navbar 应该是很常见的需求。要自定义一个 navbar 并不难，只需要了解其组成部分即可。从上面的图

2024-06-10 00:14:13

axios对外出口API的设计方法

目录axios 的 2 种使用方式请求方法别名Axios 类Axios.prototype.request()axios.defaults/interceptors请求方法别名导出 axios如果直接导出 Axios总结本文我们将讨论 axio

2024-06-10 00:14:11

js实现WebSocket 连接的示例代码

目录一.WebSocket 简单介绍1.HTTP和WebSocket的区别2.WebSocket应用场景二.js使用WebSocket1.创建WebSocket实例2.属性3.方法4.事件5.使用示例一.WebSocket 简单介绍1.HTTP

2024-06-10 00:14:10

保姆级Decimal.js使用教程(解决js精度问题)

目录精度问题控制台图样01.引入Decimal.js02.使用加减乘除全上附：Vue项目完整例子总结 精度问题控制台图样如果银行的业务你这样做，不知道要损失多少钱，这样是不行的，计算的不准

2024-06-10 00:14:07

使用Vue3实现在浏览器端进行zip文件压缩

在前端开发中，我们时常需要处理文件上传和下载的功能。有时，用户可能希望将多个文件打包成一个zip文件以便于下载。我这里分享一个使用Vue3和JSZip库在浏览器端实现zip文件压

2024-06-10 00:14:04

axios拦截器机制的实现原理详解

目录axios 拦截器简介Axios 实例拦截器类拦截器实现原理收集拦截器拼接请求链由请求链结构看错误处理第一个请求拦截器出错最后一个请求拦截器出错axios 请求出错响应拦截器

2024-06-10 00:14:02

Python实现图片二值化的详细代码

目录1. 什么是二值化2. 二值化的作用3. 二值化的实现4.代码实现1. 什么是二值化图像二值化就是将图像上的像素点的“灰度值”设置为[0, 0, 0]或[255, 255, 255]，即

2024-06-10 00:14:00

printJS打印问题汇总以及解决办法

目录一、打印预览表格列不全（Element的el-table组件）1、打印设置“打印缩放”2、修改el——table的底层代码（如果页面上有多个表格慎用） 二、如何解决vue p

2024-06-10 00:13:57

vue前端实现login页登陆验证码代码示例

实现效果// template<el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="login-container"> <span

2024-06-10 00:13:55

vue3中element Plus插槽示例详解

vue3中element Plus插槽，实现代码如下所示： <el-table-column property="" label="操作" width="200" show-overflow-tooltip> <template

2024-06-10 00:13:52

如何在JavaScript实现Blob文件流下载

目录一、下载二、请求三、示例总结一、下载在 JavaScript 中，可以使用浏览器提供的 Blob 对象和 URL.createObjectURL() 方法来实现文件流下载。下面是一个示例代码，可以帮助

2024-06-10 00:13:50

详解Javascript如何通过async/await优雅地使用FileReader

目录封装成方法Javascript封装成一个classTypeScript封装成一个classTypeScript基于泛型FileReader的使用机会很多，但是它是异步的，因此很容易出现回调地狱。我们可以使用asyn

2024-06-10 00:13:48

使用Webstorm调试Vue代码详细图文教程

在我们前端开发过程中相信很多人都是通过console.log来调试我们的代码的，但是当代码复杂度比较高的时候这个方法就比较鸡肋了。这里我来教大家在Webstorm中如何来调试自己的

2024-06-10 00:13:47

热点内容

微信百度网盘小程序文件分享链接提取
2019-07-09
uni-app微信小程序登录授权的实现
2020-05-22
Vue中ref和$refs的介绍以及使用方法示例
2021-01-11
Vue 实现可视化拖拽页面编辑器
2021-02-01
vant组件中 dialog的确认按钮的回调事件操作
2020-11-04
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020-05-27
vue element-ui实现input输入框金额数字添加千分位
2020-05-27
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020-05-27
微信小程序实现二维码签到考勤系统
2020-05-27
如何获取监听iframe src属性的改变事件
2020-02-20
返回顶部
顶部