最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

微信小程序?qū)崿F(xiàn)錄制、試聽、上傳音頻功能（帶波形圖）

 更新時間：2020年02月27日 16:10:48   作者：codezha  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)錄制、試聽、上傳音頻功能（帶波形圖）,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

最近接到這樣一個需求，要求實現(xiàn)錄制、試聽、上傳音頻功能，選擇的是getBackgroundAudioManager,聲音錄制和播放波形圖是用css實現(xiàn)的，效果圖及詳細設計代碼如下：

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

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({
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  startClick:false,
  contentHeight: contentHeight,
  voiceState:false,
  tempFilePath:'',
  recordingTimeqwe:0,//錄音計時
  setInter:"",//錄音名稱
  isplay:true, //播放狀態(tài) true--播放中 false--暫停播放
  uploadState:false,
  showhandle1:true,
  showhandle2:false,
  showWaveView:false,
  currentLeft:10,
  currentTime:'00'
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function (options) {
  this.initRecord()
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
  */
 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})
   }
  })
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面顯示
  */
 onShow: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面隱藏
  */
 onHide: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面卸載
  */
 onUnload: function () {
 },
 /**
  * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
  */
 onPullDownRefresh: function () {
 },
 /**
  * 頁面上拉觸底事件的處理函數(shù)
  */
 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;
}

總結

到此這篇關于微信小程序?qū)崿F(xiàn)錄制、試聽、上傳音頻功能（帶波形圖）的文章就介紹到這了,更多相關微信小程序?qū)崿F(xiàn)錄制試聽上傳音頻內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • JavaScript判斷對象和數(shù)組的兩種方法

    JavaScript判斷對象和數(shù)組的兩種方法

    這篇文章主要介紹了JavaScript判斷對象和數(shù)組的兩種方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-05-05
  • 前端實現(xiàn)批量下載并打包成ZIP文件的步驟及示例

    前端實現(xiàn)批量下載并打包成ZIP文件的步驟及示例

    下載我相信很多小伙伴并不陌生,下載文件的形式也有很多,下面這篇文章主要給大家介紹了關于前端實現(xiàn)批量下載并打包成ZIP文件的步驟及示例,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2024-07-07
  • 數(shù)據(jù)排序誰最快(javascript中的Array.prototype.sort PK 快速排序)

    數(shù)據(jù)排序誰最快(javascript中的Array.prototype.sort PK 快速排序)

    今天在51js論壇中看到一個網(wǎng)友發(fā)布了一個javasctipt實現(xiàn)的快速排序的算法，前些日子工作中也涉及到javasctipt中數(shù)據(jù)排序的應用，當時為了提高排序速度，使用的也是快速排序的算法。
    2007-01-01
  • JavaScript加載導出STL文件的示例詳解

    JavaScript加載導出STL文件的示例詳解

    STL是一種用于表示3D模型表面的文件格式,通常由三角形面片組成,STL 文件可以是ASCII（文本）或二進制格式,其中二進制格式更為常見,因為它更緊湊且加載速度更快,本文給大家介紹了javascript加載導出 STL文件的示例,需要的朋友可以參考下
    2024-12-12
  • js對table的td進行相同內(nèi)容合并示例詳解

    js對table的td進行相同內(nèi)容合并示例詳解

    正如標題所言如何對table的td進行相同內(nèi)容合并，下面為大家詳細介紹下使用js是如何做到的，感興趣的朋友不要錯過
    2013-12-12
  • JavaScript手寫LRU算法的示例代碼

    JavaScript手寫LRU算法的示例代碼

    LRU是Least?Recently?Used的縮寫，即最近最少使用。作為一種經(jīng)典的緩存策略，它的基本思想是長期不被使用的數(shù)據(jù)，在未來被用到的幾率也不大，所以當新的數(shù)據(jù)進來時我們可以優(yōu)先把這些數(shù)據(jù)替換掉。本文用JavaScript實現(xiàn)這一算法，需要的可以參考一下
    2022-09-09
  • JS 異步遍歷的實現(xiàn)方法

    JS 異步遍歷的實現(xiàn)方法

    本文主要介紹了JS 異步遍歷的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2023-04-04
  • 微信小程序?qū)崿F(xiàn)輪播圖效果

    微信小程序?qū)崿F(xiàn)輪播圖效果

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)輪播圖效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-09-09
  • 給自定義對象加上自定義事件的支持的教程

    給自定義對象加上自定義事件的支持的教程

    自從我寫了幾個還可以拿出手的東東之后，自我感覺牛B了許多，還有不少同志圍著我，稱我為高手，虛容心大大的得到了滿足。這些是后話，暫且不表。。。
    2008-03-03
  • JS中使用new Date(str)創(chuàng)建時間對象不兼容firefox和ie的解決方法(兩種)

    JS中使用new Date(str)創(chuàng)建時間對象不兼容firefox和ie的解決方法(兩種)

    這篇文章主要介紹了JS中使用new Date(str)創(chuàng)建時間對象不兼容firefox和ie的解決方法的相關資料,需要的朋友可以參考下
    2016-12-12

最新評論

南部县| 长阳| 壶关县| 托里县| 北川| 磴口县| 尉犁县| 全南县| 逊克县| 平乐县| 家居| 彭山县| 哈巴河县| 上林县| 隆德县| 海宁市| 湘乡市| 许昌县| 精河县| 青州市| 桐庐县| 光泽县| 中西区| 浦东新区| 凤翔县| 镇安县| 东乡族自治县| 类乌齐县| 昌邑市| 平潭县| 惠东县| 将乐县| 明水县| 衡阳市| 鄂伦春自治旗| 金阳县| 泰和县| 西乌| 临邑县| 合水县| 新乡市|