위 챗 애플 릿 이 녹음 기록 기능 을 실현 하 다.

본 논문 의 사례 는 여러분 에 게 위 챗 애플 릿 이 녹음 기록 기능 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 에 게 참고 하 실 수 있 습 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
배치

<!--pages/record/record.wxml-->
<view>
 <button 
  class="tui-menu-list"
  bindtap="startRecordAac" 
  type="primary">    (aac)</button>
 <button 
  class="tui-menu-list"
  bindtap="startRecordMp3" 
  type="primary">    (mp3)</button>
 <button 
  class="tui-menu-list" 
  bindtap="stopRecord" 
  type="primary">    </button>
 <button 
  class="tui-menu-list"
  bindtap="playRecord" 
  type="primary">    </button>
</view>
스타일:

/* pages/record/record.wxss */
 
.tui-menu-list{
  flex-direction: row;
  margin: 20rpx;
  padding: 20rpx;
}
녹음 시작 과 정지.

// pages/record/record.js
Page({
 
  /**
   *        
   */
  data: {
 
  },
 
  onLoad:function (options) {
    var that = this
    this.recorderManager = wx.getRecorderManager();
    this.recorderManager.onError(function () {
      that.tip("    !");
    })
    this.recorderManager.onStop(function (res) {
      that.setData({
        src:res.tempFilePath
      })
      console.log(res.tempFilePath)
      that.tip("    !")
    })
    this.innerAudioContext = wx.createInnerAudioContext()
    this.innerAudioContext.onError((res) =>{
      that.tip("      !")
    })
  },
 
  //  
  tip:function (msg) {
    wx.showModal({
      cancelColor: 'cancelColor',
      title:'  ',
      content:msg,
      showCancel:false
    })
  },
 
  //  aac
  startRecordAac:function () {
    this.recorderManager.start({
      format:'aac'
    })
  },
 
  //  mp3
  startRecordMp3:function () {
    this.recorderManager.start({
      format:'mp3'
    })
  },
 
  //    
  stopRecord:function () {
    this.recorderManager.stop()
  },
 
  //    
  playRecord:function () {
    var that = this
    var src = this.data.src
    if (src='') {
      this.tip('    ')
      return
    }
    this.innerAudioContext.src = this.data.src
    this.innerAudioContext.play()
  }
 
  
})
효과 그림:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기