微信小程序-录音机,RECORD组件真机可用

[复制链接]
hyt_xcx手机认证 实名认证 视频认证 发表于 2017-1-19 19:46:47 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
经过测试,本demo真机可正常使用录音,并播放录音的功能,推荐新手学习

作者:Cedric-song
  1. // page/recorder/index.js
  2. var util = require('../../util/util.js')
  3. const PLAY = "播放音频"
  4. const REPEAT = "重播音频"
  5. const PAUSE = "暂停播放"

  6. const PLAY_RECORD = "开始录音"
  7. const STOP_RECORD = "停止录音"
  8. const PLAY_VOICE = "回放录音"
  9. const STOP_VOICE = "停止回放"
  10. const SAVE_VOICE = "保存录音"

  11. var playTimeInterval
  12. var recordTimeInterval

  13. Page({
  14.   onReady: function(e) {
  15.     // 使用 wx.createAudioContext 获取 audio 上下文 context
  16.     this.audioCtx = wx.createAudioContext('myAudio')
  17.   },
  18.   data: {
  19.     recording: false,
  20.     playing: false,
  21.     hasRecord: false,
  22.     recordTime: 0,
  23.     playTime: 0,
  24.     formatedRecordTime: '00:00:00',
  25.     formatedPlayTime: '00:00:00',
  26.     play: PLAY,
  27.     repeat: REPEAT,
  28.     record: PLAY_RECORD,
  29.     playRecord: PLAY_VOICE,
  30.     stopRecord: STOP_RECORD,
  31.     playVoice: PLAY_VOICE,
  32.     stopVoice: STOP_VOICE,
  33.     saveVoice: SAVE_VOICE,
  34.     audioInfo: {
  35.       poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
  36.       name: '此时此刻',
  37.       author: '许巍',
  38.       controls: false,
  39.       src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46'
  40.     },

  41.   },
  42.   audioPause: function() {
  43.     this.audioCtx.pause()
  44.   },
  45.   audioToggle: function(btnName, defaultName) {
  46.     let otherBtnName = btnName === "play" ? "repeat" : "play"
  47.     if (this.data[btnName] === defaultName) {
  48.       this.audioCtx.play()
  49.       this.setData({
  50.         [btnName]: PAUSE,
  51.         [otherBtnName]: otherBtnName.toUpperCase() === "PLAY" ? PLAY : REPEAT
  52.       });
  53.       return false
  54.     }
  55.     this.setData({
  56.       [btnName]: defaultName
  57.     });
  58.     this.audioPause()
  59.   },
  60.   audioPlay: function() {
  61.     this.audioToggle('play', PLAY)
  62.   },
  63.   audioRepeat: function() {
  64.     this.audioCtx.seek(0)
  65.     this.audioToggle('repeat', REPEAT)
  66.   },
  67.   defaultPause: function() {
  68.     this.setData({
  69.       play: PLAY,
  70.       repeat: REPEAT
  71.     })
  72.   },
  73.   onHide: function() {
  74.     if (this.data.playing) {
  75.       this.stopVoice()
  76.     } else if (this.data.recording) {
  77.       this.stopRecordUnexpectedly()
  78.     }
  79.   },
  80.   startRecord: function() {
  81.     this.setData({
  82.       recording: true
  83.     })

  84.     var that = this
  85.     recordTimeInterval = setInterval(function() {
  86.       var recordTime = that.data.recordTime += 1
  87.       that.setData({
  88.         formatedRecordTime: util.formatTime(that.data.recordTime),
  89.         recordTime: recordTime
  90.       })
  91.     }, 1000)
  92.     wx.startRecord({
  93.       success: function(res) {
  94.         that.setData({
  95.           hasRecord: true,
  96.           tempFilePath: res.tempFilePath,
  97.           formatedPlayTime: util.formatTime(that.data.playTime)
  98.         })
  99.       },
  100.       complete: function() {
  101.         that.setData({
  102.           recording: false
  103.         })
  104.         clearInterval(recordTimeInterval)
  105.       }
  106.     })
  107.   },
  108.   stopRecord: function() {
  109.     wx.stopRecord()
  110.   },
  111.   stopRecordUnexpectedly: function() {
  112.     var that = this
  113.     wx.stopRecord({
  114.       success: function() {
  115.         console.log('stop record success')
  116.         clearInterval(recordTimeInterval)
  117.         that.setData({
  118.           recording: false,
  119.           hasRecord: false,
  120.           recordTime: 0,
  121.           formatedRecordTime: util.formatTime(0)
  122.         })
  123.       }
  124.     })
  125.   },
  126.   playVoice: function() {
  127.     var that = this
  128.     playTimeInterval = setInterval(function() {
  129.       var playTime = that.data.playTime + 1
  130.       console.log('update playTime', playTime)
  131.       that.setData({
  132.         playing: true,
  133.         formatedPlayTime: util.formatTime(playTime),
  134.         playTime: playTime
  135.       })
  136.     }, 1000)
  137.     wx.playVoice({
  138.       filePath: this.data.tempFilePath,
  139.       success: function() {
  140.         clearInterval(playTimeInterval)
  141.         var playTime = 0
  142.         console.log('play voice finished')
  143.         that.setData({
  144.           playing: false,
  145.           formatedPlayTime: util.formatTime(playTime),
  146.           playTime: playTime
  147.         })
  148.       }
  149.     })
  150.   },
  151.   pauseVoice: function() {
  152.     clearInterval(playTimeInterval)
  153.     wx.pauseVoice()
  154.     this.setData({
  155.       playing: false
  156.     })
  157.   },
  158.   stopVoice: function() {
  159.     clearInterval(playTimeInterval)
  160.     this.setData({
  161.       playing: false,
  162.       formatedPlayTime: util.formatTime(0),
  163.       playTime: 0
  164.     })
  165.     wx.stopVoice()
  166.   },
  167.   saveVoice: function() {
  168.     wx.saveFile({
  169.       success: function(res) {
  170.         var tempFilePath = res.tempFilePath
  171.         wx.saveFile({
  172.           tempFilePath: tempFilePath,
  173.           success: function(res) {
  174.             var savedFilePath = res.savedFilePath
  175.           }
  176.         })
  177.       }
  178.     })
  179.   },
  180.   clear: function() {
  181.     clearInterval(playTimeInterval)
  182.     wx.stopVoice()
  183.     this.setData({
  184.       playing: false,
  185.       hasRecord: false,
  186.       tempFilePath: '',
  187.       formatedRecordTime: util.formatTime(0),
  188.       recordTime: 0,
  189.       playTime: 0
  190.     })
  191.   }
  192. })
复制代码
1.gif
1.png

2.png

3.png



项目地址:
游客,如果您要查看本帖隐藏内容请回复


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ- Archiver-手机版-小黑屋- 浩阳天社区  

Powered by Discuz! X3.2© 2001-2013 Comsenz Inc.  蜀ICP备16032957号-1