在钉钉小程序中实现录音和播放功能实例

最新更新时间：2020年06月27日11:35:07

《猛戳-查看我的博客地图-总有你意想不到的惊喜》

本文内容：钉钉小程序开发，录音，播放单段录音，连续播放多段录音

项目背景

入职公司以来用了一年的时间从0-1完成了一个微信小程序项目的开发，取得了巨大的成功，对自己的技术沉淀有着非常重大的意义，同时也开启了自己的管理道路的职业生涯。近期为了提升公司内部的管理水平，已经启动开发一款钉钉小程序产品，面向于内部全体员工使用，包括培训、考核、学习等功能。

DOM

<view>
  <view class="play-record" onTap="playAllAudio">播放全部录音</view>
  <view a:for="{{recordAudioArr}}" a:for-index="idx" a:for-item="item">
    <view class="play-record-single" onTap="playSingleAudio" data-idx="{{idx}}">播放第{{idx+1}}个录音</view>
  </view>
  <view class="record-btn {{hasStart ? 'record-btn-active' : '' }}" onTouchStart="recordStart" onTouchEnd="recordEnd" onTouchCancel="recordCancel">录音</view>
</view>

CSS

.play-record{
  width: 200px;
  line-height: 30px;
  margin: 0 auto;
  background: #DDA0DD;
  text-align: center;
  border-radius: 5px;
  color: #FFFFFF;
}
.play-record-single{
  width: 100px;
  line-height: 30px;
  margin: 20px auto 0;
  background: #F5DEB3;
  text-align: center;
  border-radius: 5px;
  color: #FFFFFF;
}
.record-btn{
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  line-height: 60px;
  border-radius: 50%;
  background: #6495ED;
  text-align: center;
  color: #FFFFFF;
}
.record-btn-active{
  background: #4169E1;
}

JS

let rm = null;//录音管理器

Page({

  data: {
    hasStart: false,
    recordAudioArr: []
  },

  canUseRecord: true,//是否可以使用录音功能

  onLoad() {
    
    if (dd.canIUse('getRecorderManager')) {
      rm = dd.getRecorderManager();//录音管理器
      rm.onstart = () => {
        console.log('开始录音');
      }
      rm.onstop = (res) => {
        console.log('结束录音');//res.tempFilePath
        this.data.recordAudioArr.push(res.tempFilePath);
        this.setData({
          recordAudioArr: this.data.recordAudioArr
        });
        console.log(this.data.recordAudioArr);
      }
      rm.onerror = (err) => {
        dd.showToast({content: JSON.stringify(err)});
      }
    } else {
      this.canUseRecord = false;
      dd.showToast({content: '请升级钉钉版本至4.5.18以支持录音功能'});
    }
  },

  /**
   * 触摸动作开始
   */
  recordStart(){
    if(!this.canUseRecord)
      return
    this.setData({
      hasStart: true
    });
    rm.start({ duration: 60 });//不写duration，在Android上会报错，errorCode-2-参数错误；暂未发现录音时长上线
  },

  /**
   * 触摸动作结束
   */
  recordEnd(){
    if(!this.canUseRecord)
      return
    this.setData({
      hasStart: false
    });
    rm.stop();
  },

  /**
   * 触摸动作被打断，如来电提醒，弹窗
   */
  recordCancel(){
    if(!this.canUseRecord)
      return
    console.log('recordCancel')
    this.setData({
      hasStart: false
    });
  },

  /**
   * 播放全部录音
   */
  playAllAudio(){
    let length = this.data.recordAudioArr.length;//录音的总数
    let index = 0;//录音的索引
    let bam = dd.getBackgroundAudioManager();
    //监听背景音频结束事件
    bam.onEnded = (e) => {
      index++;
      if(index >= length)
        return
      bam.src = this.data.recordAudioArr[index];
      bam.title = '';//不实例化此属性，ios调用多次play()，playbackRate会累加
      bam.play();
    }
    //监听背景音频错误事件, 错误类型（10001-系统错误 10002-网络错误 10003-文件错误 10004-格式错误）
    bam.onError = (err) => {
      dd.showToast({content: JSON.stringify(err)});
    }
    bam.src = this.data.recordAudioArr[index];
    bam.title = '';//不实例化此属性，ios调用多次play()，playbackRate会累加
    bam.play();
  },

  /**
   * 播放单段录音
   */
  playSingleAudio(e){
    let bam = dd.getBackgroundAudioManager();//背景音频管理器
    //监听背景音频错误事件, 错误类型（10001-系统错误 10002-网络错误 10003-文件错误 10004-格式错误）
    bam.onError = (err) => {
      dd.showToast({content: JSON.stringify(err)});
    }
    let idx = e.currentTarget.dataset.idx;//录音的索引
    bam.src = this.data.recordAudioArr[idx];
    bam.title = '';//不实例化此属性，ios调用多次play()，playbackRate会累加
    bam.play();
  }

});

参考资料

• 钉钉开发文档-getBackgroundAudioManager

感谢阅读，欢迎评论^-^

打赏我吧^-^