8.2.2 录音

语音录制功能也是开发者经常会使用的功能,本节将阐述录音功能相关的API。

wx.startRecord(OBJECT)

开始录音。当主动调用wx.stopRecord,或者录音超过1分钟时自动结束录音,返回录音文件的临时文件路径。当用户离开小程序时,此接口无法调用。 OBJECT参数说明,如表8-13所示:

表8-13

参数名 类型 必填 说明
success Function 录音成功后调用,返回录音文件的临时文件路径,res = {tempFilePath: '录音文件的临时路径'}
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

wx.stopRecord()

​ 主动调用停止录音。

示例代码: wxml中:

<scroll-view>
  <view wx:if="{{voices}}" class="common-list" style="margin-bottom:120rpx;">
    <block wx:for="{{voices}}">
      <view class="board">
        <view class="cell">
          <view class="cell-bd" data-key="{{item.filePath}}" bindtap="gotoPlay">
            <view class="date">存储路径:{{item.filePath}}</view>
            <view class="date">存储时间:{{item.createTime}}</view>
            <view class="date">音频大小:{{item.size}}KB</view>
          </view>
        </view>
      </view>
    </block>
  </view>
</scroll-view>
<view wx:if="{{isSpeaking}}" class="speak-style">
  <image class="sound-style" src="../../images/record_icon_1.png"></image>
  <image wx:if="{{j==2}}" class="sound-style" src="../../images/record_icon_2.png"></image>
  <image wx:if="{{j==3}}" class="sound-style" src="../../images/record_icon_3.png"></image>
  <image wx:if="{{j==4}}" class="sound-style" src="../../images/record_icon_4.png"></image>
  <image wx:if="{{j==5}}" class="sound-style" src="../../images/record_icon_5.png"></image>
</view>
<view class="record-style">
  <button class="btn-style" bindtouchstart="touchdown" bindtouchend="touchup">按住 录音</button>
</view>

js中:

//获取应用实例  
var app = getApp()
Page({
  data: {
    j: 1,//帧动画初始图片  
    isSpeaking: false,//是否正在说话  
    voices: [],//音频数组  
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: 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 < res.fileList.length; i++) {
              //格式化时间  
              var createTime = new Date(res.fileList[i].createTime)
              //将音频大小B转为KB  
              var size = (res.fileList[i].size / 1024).toFixed(2);
              var voice = { filePath: res.fileList[i].filePath, createTime: createTime, size: size };
              console.log("文件路径: " + res.fileList[i].filePath)
              console.log("文件时间: " + createTime)
              console.log("文件大小: " + size)
              voices = voices.concat(voice);
            }
            _this.setData({
              voices: voices
            })
          }
        })
      },
      fail: function (res) {
        //录音失败  
        wx.showModal({
          title: '提示',
          content: '录音的姿势不对!',
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
              return
            }
          }
        })
      }
    })
  },
  //手指抬起  
  touchup: function () {
    console.log("手指抬起了...")
    this.setData({
      isSpeaking: false,
    })
    clearInterval(this.timer)
    wx.stopRecord()
  },
  //点击播放录音  
  gotoPlay: function (e) {
    var filePath = e.currentTarget.dataset.key;
    //点击开始播放  
    wx.showToast({
      title: '开始播放',
      icon: 'success',
      duration: 1000
    })
    wx.playVoice({
      filePath: filePath,
      success: function () {
        wx.showToast({
          title: '播放结束',
          icon: 'success',
          duration: 1000
        })
      }
    })
  }
})

//麦克风帧动画  
function speaking() {
  var _this = this;
  //话筒帧动画  
  var i = 1;
  this.timer = setInterval(function () {
    i++;
    i = i % 5;
    _this.setData({
      j: i
    })
  }, 200);
}

运行效果如图8-2所示:

图8-2 录音API示例运行效果图

注意:

  • 文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用wx.saveFile,在小程序下次启动时才能访问得到。
  • wx.startRecord 接口需要用户授权,请兼容用户拒绝授权的场景。

results matching ""

    No results matching ""