微信小程序--录音

var app = getApp(),
  $ = require("../../utils/util.js");
const recorderManager = wx.getRecorderManager();
var interval;
Page({
  data: {
    listen: false,
    voicePath: "",
    minute: 0,
    second: 0,
    timeText: "00:00"
  },
  onLoad: function(e) {},
  //计时器
  timer: function() {
    let second = Number(this.data.second);
    let minute = Number(this.data.minute);
    let timeText = this.data.timeText;
    second = second + 1;
    if (second >= 60) {
      second = 0;
      minute = minute + 1;
    }
    second < 10 ? second = "0" + second : second;
    minute < 10 ? minute = "0" + minute : minute;
    timeText = minute + ":" + second;
    this.setData({
      second: second,
      minute: minute,
      timeText: timeText
    })
  },
  //开始录音
  startluyin: function() {
    let that = this;
    that.setData({
      start: true,
    });
    interval = setInterval(function() {
      that.timer();
    }, 1000)
    const options = {
      duration: 600000, //指定录音的时长，单位 ms
      sampleRate: 16000, //采样率
      numberOfChannels: 1, //录音通道数
      encodeBitRate: 96000, //编码码率
      format: 'mp3', //音频格式，有效值 aac/mp3
      frameSize: 50, //指定帧大小，单位 KB
    }
    //开始录音
    recorderManager.start(options);
    recorderManager.onStart(() => {
      console.log('recorder start')
    });
    //错误回调
    recorderManager.onError((res) => {
      console.log(res);
    })
  },
  //结束录音
  endluyin: function() {
    this.setData({
      start: false
    })
    recorderManager.stop();
    recorderManager.onStop((res) => {
      this.tempFilePath = res.tempFilePath;
      console.log('停止录音', res.tempFilePath)
      const {
        tempFilePath
      } = res;
      this.setData({
        audioPath: res.tempFilePath
      })
    })
    clearInterval(interval);
  },
  //删除录音
  deleteluyin: function() {
    let that = this;
    wx.showModal({
      title: '提示',
      content: '您确定要删除此录音吗',
      success: function(res) {
        if (res.confirm) {
          that.setData({
            timeText: "00:00",
            voicePath: "",
            audioPath: ""

          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },
  //播放录音
  playaudio: function() {
    const innerAudioContext = wx.createInnerAudioContext();
    this.setData({
      listen: true
    })
    innerAudioContext.autoplay = true
    innerAudioContext.src = this.tempFilePath
    innerAudioContext.onPlay(() => {
      console.log('开始播放')
    })
    //监听是否播放完毕
    innerAudioContext.onEnded(() => {
      console.log('播放结束')
      this.setData({
        listen: false
      })
    })
    innerAudioContext.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    })
  },
  //上传录音
  uploadluyin: function() {
    let that = this;
    $.AJAX(app.globalData.API_OSSUPLOAD + '?type=sp_twitter', "GET", {}, function(res) {
      var oss = res.datas;
      var audioPath = that.data.audioPath;
      var voicePath = that.data.voicePath;
      console.log(audioPath, "111")
      if (audioPath) {
        $.loading("上传中...", 10000)
        oss.path = audioPath;
        var imgtype = audioPath.substr(audioPath.length - 3);
        var imgname = $.getrandom() + '/' + $.getrandom2() + '.' + imgtype;
        oss.key = oss.key + imgname;
        $.UPLOADOSS(oss.host, oss, function(res) {
          voicePath = oss.host + "/" + oss.key;
          that.setData({
            voicePath: voicePath
          })
          $.hideloading();
          wx.showToast({
            title: '上传成功',
            icon: 'success',
            duration: 2000
          })
          wx.navigateBack({
            delta: 1
          })
          let pages = getCurrentPages();
          console.log(pages, "pages---")
          let timeText = that.data.timeText;
          pages[1].setData({
            voice: voicePath,
            audioflag: true,
            timeText: timeText
          })
        })
      } else {
        wx.showModal({
          title: '提示',
          content: '请录音再上传',
          showCancel: false,
          confirmText: "知道了",
          success: function(res) {
            if (res.confirm) {
              console.log('用户点击确定')
            }
          }
        })
      }
    })
  }
})

　　

<view class="container">
    <view class='topbox'>
        <view class="m-loading-box" bindtap='playaudio'>
            <label class="{{listen?'u-loading':'u-noloading'}}"></label>
            <image class="luyin1" src="https://cdn.quansuwangluo.com/shapan/luyin1.png"></image>
        </view>
        <view class='time'>{{timeText}}</view>
    </view>
    <view class='bottombox'>
        <view class='opt opt_del' bindtap='deleteluyin'>
            <view class='delwrap'>
                <image src="https://cdn.quansuwangluo.com/shapan/del.png"></image>
            </view>
            <view>删除</view>
        </view>
        <view class='opt opt_luyin' bindtap='startluyin' wx:if="{{!start}}">
            <view class='luyinwrap'>
                <image  src="https://cdn.quansuwangluo.com/shapan/pause.png"></image>
            </view>
            <view>点击录音</view>
        </view>
        <view class='opt opt_luyin' bindtap='endluyin' wx:else>
            <view class='luyinwrap'>
                <image src="https://cdn.quansuwangluo.com/shapan/nopause.png"></image>
            </view>
            <view>点击录音</view>
        </view>
        <view class='opt opt_listen' bindtap='uploadluyin'>
            <view class='listenwrap'>
                <image src="https://cdn.quansuwangluo.com/shapan/upload.png"></image>
            </view>
            <view>上传</view>
        </view>
    </view>
</view>

　　

.topbox{
    background-color: #FCF6ED;
    font-size: 58rpx;
    text-align: center;
    position: relative;
    padding: 225rpx 0;
}
.topbox .u-loading{
    width: 240rpx;
    height: 240rpx;
      display: inline-block;
    vertical-align: middle;
    -webkit-animation: weuiLoading 1s steps(12, end) infinite;
    animation: weuiLoading 1s steps(12, end) infinite;
    background: transparent url('https://cdn.quansuwangluo.com/shapan/loading.png') no-repeat;
    background-size: 100%;
}
.topbox .u-noloading{
    width: 240rpx;
    height: 240rpx;
    display: inline-block;
    vertical-align: middle;
    background: transparent url('https://cdn.quansuwangluo.com/shapan/loading.png') no-repeat;
    background-size: 100%;
}
.luyin1{
    height: 60rpx;
    width: 38rpx;
    position: absolute;
    left: 358rpx;
    top:314rpx;
}
.topbox .time{
    margin-top: 35rpx;
}
.bottombox{
    background-color: #FEA22C;
    display: flex;
    align-items: center;
    height: 400rpx;
    color: #fff;
    font-size: 34rpx;
    padding:  0 90rpx;
    text-align: center;
}
.opt_del,.opt_listen{
    margin-top: 20rpx;
}
.opt_del .delwrap{
    width: 120rpx;
    height: 120rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4rpx solid #fff;
    border-radius: 50%;
    margin-bottom: 20rpx;
}
.opt_del image{
    width: 44rpx;
    height: 58rpx;
}
.opt_luyin{
    padding: 0 70rpx;
}
.opt_luyin .luyinwrap{
    width: 180rpx;
    height: 180rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 50%;
    margin-bottom: 20rpx;
}
.opt_luyin image{
    width: 60rpx;
    height: 60rpx;
}
.opt_listen image{
    width: 60rpx;
    height: 54rpx;
}
.opt_listen .listenwrap{
    width: 120rpx;
    height: 120rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4rpx solid #fff;
    border-radius: 50%;
    margin-bottom: 20rpx;
}