咫尺论坛 › 微信小程序开发教程 › 微信小程序组件学习demo：录音机，RECORD组件真机可用

柿霖不是林 发表于 2017-3-3 10:49:18

微信小程序组件学习demo：录音机，RECORD组件真机可用

经过测试，本demo真机可正常使用录音，并播放录音的功能，推荐新手学习

作者：Cedric-song





// page/recorder/index.js
var util = require('../../util/util.js')
const PLAY = "播放音频"
const REPEAT = "重播音频"
const PAUSE = "暂停播放"

const PLAY_RECORD = "开始录音"
const STOP_RECORD = "停止录音"
const PLAY_VOICE = "回放录音"
const STOP_VOICE = "停止回放"
const SAVE_VOICE = "保存录音"

var playTimeInterval
var recordTimeInterval

Page({
onReady: function(e) {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
},
data: {
    recording: false,
    playing: false,
    hasRecord: false,
    recordTime: 0,
    playTime: 0,
    formatedRecordTime: '00:00:00',
    formatedPlayTime: '00:00:00',
    play: PLAY,
    repeat: REPEAT,
    record: PLAY_RECORD,
    playRecord: PLAY_VOICE,
    stopRecord: STOP_RECORD,
    playVoice: PLAY_VOICE,
    stopVoice: STOP_VOICE,
    saveVoice: SAVE_VOICE,
    audioInfo: {
      poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
      name: '此时此刻',
      author: '许巍',
      controls: false,
      src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46'
    },

},
audioPause: function() {
    this.audioCtx.pause()
},
audioToggle: function(btnName, defaultName) {
    let otherBtnName = btnName === "play" ? "repeat" : "play"
    if (this.data === defaultName) {
      this.audioCtx.play()
      this.setData({
      : PAUSE,
      : otherBtnName.toUpperCase() === "PLAY" ? PLAY : REPEAT
      });
      return false
    }
    this.setData({
      : defaultName
    });
    this.audioPause()
},
audioPlay: function() {
    this.audioToggle('play', PLAY)
},
audioRepeat: function() {
    this.audioCtx.seek(0)
    this.audioToggle('repeat', REPEAT)
},
defaultPause: function() {
    this.setData({
      play: PLAY,
      repeat: REPEAT
    })
},
onHide: function() {
    if (this.data.playing) {
      this.stopVoice()
    } else if (this.data.recording) {
      this.stopRecordUnexpectedly()
    }
},
startRecord: function() {
    this.setData({
      recording: true
    })

    var that = this
    recordTimeInterval = setInterval(function() {
      var recordTime = that.data.recordTime += 1
      that.setData({
      formatedRecordTime: util.formatTime(that.data.recordTime),
      recordTime: recordTime
      })
    }, 1000)
    wx.startRecord({
      success: function(res) {
      that.setData({
          hasRecord: true,
          tempFilePath: res.tempFilePath,
          formatedPlayTime: util.formatTime(that.data.playTime)
      })
      },
      complete: function() {
      that.setData({
          recording: false
      })
      clearInterval(recordTimeInterval)
      }
    })
},
stopRecord: function() {
    wx.stopRecord()
},
stopRecordUnexpectedly: function() {
    var that = this
    wx.stopRecord({
      success: function() {
      console.log('stop record success')
      clearInterval(recordTimeInterval)
      that.setData({
          recording: false,
          hasRecord: false,
          recordTime: 0,
          formatedRecordTime: util.formatTime(0)
      })
      }
    })
},
playVoice: function() {
    var that = this
    playTimeInterval = setInterval(function() {
      var playTime = that.data.playTime + 1
      console.log('update playTime', playTime)
      that.setData({
      playing: true,
      formatedPlayTime: util.formatTime(playTime),
      playTime: playTime
      })
    }, 1000)
    wx.playVoice({
      filePath: this.data.tempFilePath,
      success: function() {
      clearInterval(playTimeInterval)
      var playTime = 0
      console.log('play voice finished')
      that.setData({
          playing: false,
          formatedPlayTime: util.formatTime(playTime),
          playTime: playTime
      })
      }
    })
},
pauseVoice: function() {
    clearInterval(playTimeInterval)
    wx.pauseVoice()
    this.setData({
      playing: false
    })
},
stopVoice: function() {
    clearInterval(playTimeInterval)
    this.setData({
      playing: false,
      formatedPlayTime: util.formatTime(0),
      playTime: 0
    })
    wx.stopVoice()
},
saveVoice: function() {
    wx.saveFile({
      success: function(res) {
      var tempFilePath = res.tempFilePath
      wx.saveFile({
          tempFilePath: tempFilePath,
          success: function(res) {
            var savedFilePath = res.savedFilePath
          }
      })
      }
    })
},
clear: function() {
    clearInterval(playTimeInterval)
    wx.stopVoice()
    this.setData({
      playing: false,
      hasRecord: false,
      tempFilePath: '',
      formatedRecordTime: util.formatTime(0),
      recordTime: 0,
      playTime: 0
    })
}
})




**** Hidden Message *****

红妞雪儿 发表于 2018-10-12 12:10:18

谢谢分享，我会好好学习哦

华外家+中级班king 发表于 2018-11-14 20:31:36

我哦 偶就曾经啊你想看就参考垃圾来参加

pchy苒 发表于 2018-12-12 11:11:00

xuexi ingxuexi ingxuexi ing

云雀 发表于 2019-3-20 18:36:39

感谢分享

张熹禄 发表于 2019-3-25 10:56:06

谢谢分享，我会好好学习哦

jack56846 发表于 2020-4-4 16:48:43

我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微,信,号j i m 2 0 1 8 0 6 8 8，详聊

查看完整版本: 微信小程序组件学习demo：录音机，RECORD组件真机可用