微信小程序之上传录音功能详述及前后端代码分享

主要功能：获取服务器端作业，循环输出作业内容，为每条作业实现录音上传

大坑：点击循环列表中的一个按钮，其他按钮也一起激活。。。找了好多资料。综合各个资料。终于解决这个问题（点击组件，获取点击下标。给每个组件赋值为当前下标，判断点击的下标是否等于当前组件的小标，从而判断点击的哪个组件）

 

先上大家最关心的js代码：

// pages/audio/audio.js
var common = require('../../utils/util.js'); //获取时间
const app = getApp()
const innerAudioContext = wx.createInnerAudioContext();
Page({

  data: {
    isPlayAudio: false, //暂停播放按钮显示切换
    chooseday: "", //选择日期（通过setData默认为今天）
    choosekemu: "", //选择科目 （通过setData默认为语文）
    kemu: ['语文作业', '数学作业', '英语作业', '其他作业'], //科目列表
    hw_audio_area: [], //需要循环的作业内容
    hw_audio_array: [], //需要循环的临时数组
    index: '', //点击循环数组中元素的下标，表示当前点击了哪个元素
    checkid: -1, //点击“开始录音”按钮的下标。设为-1表示默认未点击
    checkidEnd: -1, //点击“结束录音”按钮的下标。设为-1表示默认未点击
    checkidre: -1, //点击“重新录音”按钮的下标。设为-1表示默认未点击
    name: '', //用户名
    serverPath: '', //服务器端本地路径
    httpPath: '', //服务器端http路径
    /*播放器*/
    audiolist: [{
      audiosrc: '',
    }],
    isPlayAudio: false,
    audioSeek: 0,
    audioDuration: 0,
    showTime1: '00:00',
    showTime2: '00:00',
    audioTime: 0
  },
  onLoad: function() {
    //获取系统日期及用户名
    var today = common.formatTime(new Date()); //获取系统日期，今天
    const name = getApp().globalData.name; //获取全局变量，登录用户名
    this.setData({
      name
    })
    this.setData({
      chooseday: today, //设置默认的日期
      choosekemu: '语文作业', //设置默认的科目
    })
    this.hw_request() //服务器请求函数
  },
  /*选择科目 */
  kemuChange: function(e) {
    this.setData({
      chooseday, //重新设置系统日期为选中的日期
      choosekemu: this.data.kemu[e.detail.value]
    })
    this.hw_request()
  },
  /*选择日期 */
  bindDateChange: function(e) {
    this.setData({
      chooseday: e.detail.value,
      choosekemu //重新设置科目为选中的科目
    })
    this.hw_request()
  },
  // 查询作业服务器请求函数
  hw_request() {
    var that = this
    wx.request({
      url: 'https://www.ailaiyun.com/1.php', //服务器地址
      method: 'post',
      data: {
        type: 'hw_get_audio',
        hw_kemu: that.data.choosekemu,
        today: that.data.chooseday,
      },
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      success(res) {
        // console.log(res.data)
        //如果服务器返回的data值为空表示当天这个科目下没有作业
        if (res.data == null) {
          that.setData({
            hw_audio_area: ''
          })
          wx.showToast({
            title: '今日暂无' + that.data.choosekemu + '（录音）',
            icon: 'none'
          })
        } else {
          var hw_audio_array = that.data.hw_audio_array; // 根据服务器返回的数组组合为新的数组
          var hw_audio_area = that.data.hw_audio_area; // 服务器返回的数组
          for (let i = 0; i < res.data.length; i++) {
            hw_audio_array.push(res.data[i].hw_audio) //提取服务器返回的数组中的需要的对象
            that.setData({
              hw_audio_array
            })
            // console.log(hw_audio_array)
          }
          that.removeEmpty(hw_audio_array) //去除数组中的空值
          var str = String(hw_audio_array); //转换为字符串
          var arr = str.split("^"); //去除旧字符串中的'^'并赋值一个新的字符串
          that.removeEmpty(arr) //再次清除数组中的空值
          //把值存到需要要循环的数组中
          that.setData({
            hw_audio_area: arr
          })
          // console.log(that.data.hw_audio_area)
        }
      },
    })
  },
  /**去除数组中的空值 */
  removeEmpty: function(arr) {
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] == "" || typeof(arr[i]) == "undefined" || arr[i] == ",") {
        arr.splice(i, 1);
        i = i - 1; // i - 1 ,因为空元素在数组下标 2 位置，删除空之后，后面的元素要向前补位
      }
    }
    return arr;
  },
  /*开始录音 */
  start: function(e) {
    // console.log(e)
    // console.log(e.currentTarget.dataset.id)
    var checkid = e.currentTarget.dataset.index //点击开始的按钮的下标
    //控制结束按钮显示
    this.setData({
      checkid: checkid,
      checkidre: checkid,
      checkidEnd: -1
    })
    // console.log(this.data.checkid)
    //启动录音功能
    const recorderManager = wx.getRecorderManager()
    recorderMan