微信小程序 录音实现上传 和播放录音

// pages/recorderManager/recorderManager.js
const recorderManager = wx.getRecorderManager();
const innerAudioContext = wx.createInnerAudioContext();
Page({
  data: {
    openRecordingdis: "block",//录音图片的不同
    shutRecordingdis: "none",//录音图片的不同
    recordingTimeqwe:0,//录音计时
    setInter:"",//录音名称
    isplay:true //播放状态  true--播放中  false--暂停播放
  },
 
   //录音计时器
  recordingTimer:function(){
    var that = this;
    //将计时器赋值给setInter
    that.data.setInter = setInterval(
      function () {
        var time = that.data.recordingTimeqwe + 1;
        if(time>60){
          wx.showToast({
            title: '录音时长到一分钟啦',
            duration:1500,
            mask:true
          })
          clearInterval(that.data.setInter);
          that.shutRecording();
          return;
        }
        that.setData({
          recordingTimeqwe: time
        })
      }
      , 1000); 
  },
 
 
  //开始录音
  openRecording: function() {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          shutRecordingdis: "block",
          openRecordingdis: "none"
        })
      }
    })
    const options = {
      duration: 60000, //指定录音的时长，单位 ms，最大为10分钟（600000），默认为1分钟（60000）
      sampleRate: 16000, //采样率
      numberOfChannels: 1, //录音通道数
      encodeBitRate: 96000, //编码码率
      format: 'mp3', //音频格式，有效值 aac/mp3
      frameSize: 50, //指定帧大小，单位 KB
    }
    //开始录音计时   
    that.recordingTimer();
    //开始录音
    recorderManager.start(options);
    recorderManager.onStart(() => {
      console.log('。。。开始录音。。。')
    });
    //错误回调
    recorderManager.onError((res) => {
      console.log(res);
    })
  },
 
  //结束录音
  shutRecording: function() {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          shutRecordingdis: "none",
          openRecordingdis: "block"
        })
      }
    })
    recorderManager.stop();
    recorderManager.onStop((res) => {
      console.log('。。停止录音。。', res.tempFilePath)
      const {tempFilePath} = res;
      //结束录音计时  
      clearInterval(that.data.setInter);
      //上传录音
      wx.uploadFile({
        url: "http://www.xinjue.com:8080/imageUpload?fileType=mp3",//这是你自己后台的连接
        filePath: tempFilePath,
        name:"file",//后台要绑定的名称
        header: {
          "Content-Type": "multipart/form-data"
        },
        //参数绑定
        formData:{
          recordingtime: that.data.recordingTimeqwe,
          topicid: that.data.topicid,
          userid:1,
          praisepoints:0
        },
        success:function(ress){
          console.log(res);
          wx.showToast({
            title: '保存完成',
            icon:'success',
            duration:2000
          })
          that.setData({
            recordingTimeqwe:0
          })
        },
        fail: function(ress){
          console.log("。。录音保存失败。。");
        }
      })
    })
  },
 
  //录音播放
  recordingAndPlaying: function(e) {
    var isplay = e.currentTarget.dataset.isplay; //暂停还是播放
    innerAudioContext.src ="http://soundpreview.ohipic.com/preview/sound/00/29/33/515ppt-S293364-183B1F2B.mp3";
    innerAudioContext.startTime=0; //播放起始位置
    innerAudioContext.autoplay = true;//是否自动播放
    if (isplay == true){
      isplay = false;
      //播放事件
      innerAudioContext.onPlay(() => {
        console.log('开始播放');
      })
    }else{
      isplay = true;
      //监听暂停
      innerAudioContext.onPause(() => {
        console.log('暂停播放');
      })
    }
   this.setData({
     isplay:isplay
   })
  },
 
})

<!--pages/recorderManager/recorderManager.wxml-->
<text>录音页面编写</text>
<button bindtap="openRecording" size="50rpx">开始录音</button>
<button bindtap="stop">暂停录音</button>
<button bindtap="shutRecording">结束录音</button>
<button bindtap="recordingAndPlaying" data-isplay="{{isplay}}">播放录音</button>
<form bindsubmit="submit" report-submit='true' class='formid'>
      <button form-type="submit" >发送推送消息</button>
      </form>
      <!-- <view class="img-box">
        <canvas bindtap="previewImg" hidden="{{canvasHidden}}" style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas"/>
        <!--<image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image>
    </view> -->

使用最新的API  

InnerAudioContext 实例，可通过 wx.createInnerAudioContext 接口获取实例。