首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onFebruary 27, 2020

最近接到这样一个需求，要求实现录制、试听、上传音频功能，选择的是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;
}

总结

到此这篇关于微信小程序实现录制、试听、上传音频功能（带波形图）的文章就介绍到这了,更多相关微信小程序实现录制试听上传音频内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

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

- Author -

codezha

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery Mobile 导航栏代码
Nov 01 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
jQuery实现手风琴效果（蒙版）
Jan 11 jQuery
JS canvas实现画板和签字板功能
Feb 23 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 #Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 #jQuery
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 #Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 #Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 #Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 #Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 #Javascript
鸿蒙3.0(1) Debian(1) 华为(1) 蓝牙耳机(1) HarmonyOS(1) 鸿蒙(2) xhunter1.sys(1) RustDesk(1) 蓝牙(1) 虚拟键盘(1)
You might like
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
教你php如何实现验证码
2016/01/20 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
javascript html5轻松实现拖动功能
2017/03/01 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
JSON生成Form表单的方法示例
2018/11/21 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
Python列表生成器的循环技巧分享
2015/03/06 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
500行python代码实现飞机大战
2020/04/24 Python
Python hashlib模块的使用示例
2020/10/09 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
Topman美国官网：英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
出纳岗位职责范本
2013/12/01 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
年终工作总结范文2014
2014/11/27 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
离职告别感言
2015/08/04 职场文书