在釘釘小程序中實現錄音和播放功能實例

最新更新時間：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

感謝閱讀，歡迎評論^-^

打賞我吧^-^