微信小程序录音Record

最新推荐文章于 2024-10-22 23:47:59 发布

勘察加熊人

最新推荐文章于 2024-10-22 23:47:59 发布

阅读量569

点赞数 1

分类专栏：微信小程序文章标签： javascript

本文链接：https://blog.csdn.net/cf8833/article/details/107844468

版权

微信小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在微信小程序中实现录音功能，包括录音的布局设置、样式应用，以及开始和停止录音的操作，配合示例效果图展示整个流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

布局

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

  
})

效果图：