uniapp录音功能如何实现

在uniapp中如何实现录音功能？需要调用哪些API，是否有兼容性限制？希望能提供一个完整的示例代码，包括开始录音、停止录音以及获取录音文件的操作步骤。另外，录音文件支持哪些格式，能否直接上传到服务器？

2 回复

使用uniapp的uni.createInnerAudioContext()或plus.audio.getRecorder()实现录音。步骤如下：

  1. 创建录音实例
  2. 调用start()开始录音
  3. 调用stop()结束录音
  4. 通过回调获取录音文件路径 注意：需在manifest.json中配置录音权限。

在UniApp中实现录音功能，主要使用uni.getRecorderManager() API。以下是实现步骤和示例代码：

1. 基本实现步骤

  • 获取录音管理器实例
  • 监听录音事件（开始、暂停、停止、错误）
  • 调用开始、暂停、停止录音的方法
  • 处理录音文件（播放或上传）

2. 示例代码

// 在Vue页面的script中
export default {
  data() {
    return {
      recorderManager: null,
      recording: false,
      audioPath: ''
    }
  },
  onLoad() {
    // 初始化录音管理器
    this.recorderManager = uni.getRecorderManager()
    
    // 监听录音开始事件
    this.recorderManager.onStart(() => {
      console.log('录音开始')
      this.recording = true
    })
    
    // 监听录音停止事件
    this.recorderManager.onStop((res) => {
      console.log('录音停止', res)
      this.recording = false
      this.audioPath = res.tempFilePath
      // res.tempFilePath 为临时文件路径
    })
    
    // 监听录音错误事件
    this.recorderManager.onError((err) => {
      console.error('录音错误:', err)
      this.recording = false
    })
  },
  methods: {
    // 开始录音
    startRecord() {
      this.recorderManager.start({
        duration: 60000, // 最长录音时间（ms），默认1分钟
        sampleRate: 44100, // 采样率
        numberOfChannels: 1, // 录音通道数
        encodeBitRate: 192000, // 编码码率
        format: 'mp3' // 音频格式
      })
    },
    
    // 停止录音
    stopRecord() {
      this.recorderManager.stop()
    },
    
    // 播放录音
    playRecord() {
      if (this.audioPath) {
        const innerAudioContext = uni.createInnerAudioContext()
        innerAudioContext.src = this.audioPath
        innerAudioContext.play()
      } else {
        uni.showToast({ title: '请先录音', icon: 'none' })
      }
    }
  }
}

3. 模板示例

<template>
  <view class="content">
    <button @click="startRecord" :disabled="recording">开始录音</button>
    <button @click="stopRecord" :disabled="!recording">停止录音</button>
    <button @click="playRecord">播放录音</button>
  </view>
</template>

4. 注意事项

  • 权限配置：在manifest.json中需要添加录音权限：
    "mp-weixin": {
  "permissions": {
    "requirePrivateRecord": true
  }
}
  • 平台差异：不同平台支持的音频格式可能不同，建议使用通用格式如mp3
  • 临时文件：录音文件为临时文件，如需持久保存需要上传到服务器
  • 用户体验：可添加录音时长显示、波形动画等增强体验

5. 扩展功能

  • 实时获取录音分贝值：使用onFrameRecorded事件
  • 自定义录音时长：通过duration参数设置
  • 多格式支持：根据平台支持选择aac/mp3/wav等格式

这样就能在UniApp中实现基本的录音功能了。记得在实际使用前测试各平台的兼容性。

回到顶部