【小程序录音】

 js

// index.js
// 获取应用实例

const app = getApp()
const recorderManager = wx.getRecorderManager();
const innerAudioContext = wx.createInnerAudioContext();
var secondes = 0;
var timer;
Page({
  data: {
    times:'00:00',
    play:1
  },

  onLoad() {
    
  },

  start(){
  
      //开始录音
      recorderManager.start();
        var that = this;
          this.setData({play:2})
      recorderManager.onStart(() => {

           console.log('开始录音');
           this.Countdown(that);//开始计时
         
      });
      
      //错误回调
      
      recorderManager.onError((res) => {
      
         console.log('recorder出错:' + res);
      
           clearTimeout(timer);//出错时停止计时
      
      })  
  },

//暂停
pause:function(){
   recorderManager.pause();
   var that = this;
   
   recorderManager.onPause((res) => {
      console.log('暂停录音');
      that.setData({play:3})
      clearTimeout(timer);//出错时停止计时
   })  
   clearTimeout(timer);
  
},

//继续录音
resume:function(){
   recorderManager.pause();
   var that = this;
   recorderManager.onPause((res) => {
       console.log('继续录音');
       that.setData({play:2})
       that.Countdown(that);//开始计时
   })  
},

stop: function() {

    recorderManager.stop();
    recorderManager.onStop((res) => {
          this.tempFilePath = res.tempFilePath;
          console.log('停止录音', res.tempFilePath)
          clearTimeout(timer);
          const { tempFilePath } = res
    })
  
  },

Countdown(that){
    timer = setTimeout(function() {
    secondes++;
    if (secondes >= 600) {
      recorderManager.stop();
      clearTimeout(timer);
    }
    that.setData({
      times: that.formatSeconds(secondes)
    });
    that.Countdown(that);
  }, 1000);  
},

formatSeconds(value){
  var secondTime = parseInt(value); // 秒
  var minuteTime = 0; // 分
  var hourTime = 0; // 小时
  if (secondTime > 60) { //如果秒数大于60，将秒数转换成整数
    //获取分钟，除以60取整数，得到整数分钟
    minuteTime = parseInt(secondTime / 60);
    //获取秒数，秒数取佘，得到整数秒数
    secondTime = parseInt(secondTime % 60);
    //如果分钟大于60，将分钟转换成小时
    if (minuteTime > 60) {
      //获取小时，获取分钟除以60，得到整数小时
      hourTime = parseInt(minuteTime / 60);
      //获取小时后取佘的分，获取分钟除以60取佘的分
      minuteTime = parseInt(minuteTime % 60);
    }
  }
  var result;
  //时间的展示方式为00:00
  if (secondTime < 10) {
    result = "0" + parseInt(secondTime);
  } else {
    result = "" + parseInt(secondTime);
  }
  if (minuteTime > 0) {
    if (minuteTime < 10) {
      result = "0" + parseInt(minuteTime) + ":" + result;
    } else {
      result = "" + parseInt(minuteTime) + ":" + result;
    }
  } else {
    result = "00:" + result;
  }
  //由于限制时长最多为三分钟,小时用不到
  if (hourTime > 0) {
    result = "" + parseInt(hourTime) + ":" + result;
  }
  return result;
},
  //播放声音

play: function() {

      innerAudioContext.autoplay = true
  
      innerAudioContext.src = this.tempFilePath,
      
      innerAudioContext.onPlay(() => {
      
            console.log('开始播放')
  
       })
  
       innerAudioContext.onError((res) => {
  
           console.log(res.errMsg)
    
           console.log(res.errCode)
  
        })
  
  },

  
})

wxml

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <block wx:if="{{canIUseOpenData}}">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
    </block>
    <block wx:elif="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
     
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
    <view>
      <view class="container">
  <view class="page-body">
     <view class="ly">
         <view class="ly_top">
             <text>录音</text>
             <text>{{ times }}</text>
         </view>
         <view class="ly_c">
              <view class="ly_c_cancel mr">
                  <button bindtap="cancel">点击取消</button>
                  <text> </text>
              </view>
              <view class="ly_c_play mr">
                 <button bindtap="start" wx:if="{{ play == 1}}">开始{{ play }}</button>
                 <button bindtap="pause" wx:elif="{{ play == 2}}">暂停</button>
                 <button bindtap="resume" wx:elif="{{ play == 3}}">开始</button>
                 <!-- <text wx:if="is_pause">暂停</text><text wx:else>继续</text> -->
              </view>
              <view class="ly_c_succ mr">
                  <button bindtap="stop">点击完成</button>
                  <text></text>
              </view>
         </view>
     </view>     
  </view>
</view>
    
      </view>
  </view>
</view>