欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  互联网

微信小程序实现录音Record功能

程序员文章站 2022-08-05 10:40:43
本文实例为大家分享了微信小程序实现录音record功能的具体代码,供大家参考,具体内容如下布局 <...

本文实例为大家分享了微信小程序实现录音record功能的具体代码,供大家参考,具体内容如下

布局

<!--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()
  }
 
  
})

效果图:

微信小程序实现录音Record功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。