图文详解微信小程序中调用录音功能和音频播放的方法

<!--index.wxml--><scroll-view>        <view>                <block>                <view>                <view>                <view>                 <view>存储路径:{{item.filePath}}</view>                <view>存储时间:{{item.createTime}}</view>                <view>音频大小:{{item.size}}KB</view>                </view>                  </view>                </view>                </block>        </view></scroll-view><view>        <image></image>        <image></image>        <image></image>        <image></image>        <image></image></view><view>        <button>按住 录音</button></view>

/**index.wxss**/  .speak-style{      position: relative;      height: 240rpx;      width: 240rpx;      border-radius: 20rpx;      margin: 50% auto;      background: #26A5FF;  }  .item-style{      margin-top: 30rpx;      margin-bottom: 30rpx;  }  .text-style{      text-align: center;    }  .record-style{      position: fixed;      bottom: 0;      left: 0;      height: 120rpx;      width: 100%;  }  .btn-style{    margin-left: 30rpx;    margin-right: 30rpx;  }    .sound-style{    position: absolute;    width: 74rpx;    height:150rpx;    margin-top: 45rpx;    margin-left: 83rpx;  }      .board {    overflow: hidden;    border-bottom: 2rpx solid #26A5FF;    }  /*列布局*/  .cell{      display: flex;      margin: 20rpx;  }  .cell-hd{      margin-left: 10rpx;      color: #885A38;  }  .cell .cell-bd{      flex:1;      position: relative;       }  /**只显示一行*/  .date{      font-size: 30rpx;      text-overflow: ellipsis;       white-space:nowrap;      overflow:hidden;   }

//index.js  //获取应用实例  var app = getApp()  Page({    data: {      j: 1,//帧动画初始图片      isSpeaking: false,//是否正在说话      voices: [],//音频数组    },    onLoad: function () {    },    //手指按下    touchdown: function () {      console.log("手指按下了...")      console.log("new date : " + new Date)      var _this = this;      speaking.call(this);      this.setData({        isSpeaking: true      })      //开始录音      wx.startRecord({        success: function (res) {          //临时路径,下次进入小程序时无法正常使用          var tempFilePath = res.tempFilePath          console.log("tempFilePath: " + tempFilePath)          //持久保存          wx.saveFile({            tempFilePath: tempFilePath,            success: function (res) {              //持久路径              //本地文件存储的大小限制为 100M              var savedFilePath = res.savedFilePath              console.log("savedFilePath: " + savedFilePath)            }          })          wx.showToast({            title: '恭喜!录音成功',            icon: 'success',            duration: 1000          })          //获取录音音频列表          wx.getSavedFileList({            success: function (res) {              var voices = [];              for (var i = 0; i <p>通过以上实现方式，我们就可以在小程序里快乐的录音并播放了，你学会了么？</p><p>注意:</p><p>1.录音的音频默认是存在本地的临时路径下.第二次进入小程序无法正常使用,可以存持久,但是本地文件大小的限制是100M,最好还是上传后台.</p><p>2.录音的时间不能太短.否则会失败;也不能超过60秒.到了60秒会自动停止录音.</p><p>3.音频播放不能同时播放多个音频.看文档.微信小程序 播放音频文档</p>