返回

在 uni-app 中轻松实现录音

前端

使用 uni-app 轻松实现录音功能:指南与实战

在当今移动应用程序的世界中,录音功能已成为必不可少的特性,它允许用户捕获和分享音频片段。uni-app,作为一款跨平台开发框架,为开发者提供了易于使用的录音功能,让他们可以轻松地为自己的应用程序添加此功能。

录音

// 开始录音
uni.startRecord({
  success: (res) => {
    console.log('开始录音成功', res)
  },
  fail: (err) => {
    console.log('开始录音失败', err)
  }
})

停止录音

// 停止录音
uni.stopRecord({
  success: (res) => {
    console.log('停止录音成功', res)
  },
  fail: (err) => {
    console.log('停止录音失败', err)
  }
})

回放录音

// 播放录音
uni.playVoice({
  filePath: 'xxx', // 录音文件路径
  success: (res) => {
    console.log('播放录音成功', res)
  },
  fail: (err) => {
    console.log('播放录音失败', err)
  }
})

上传录音

// 上传录音
uni.uploadFile({
  url: 'xxx', // 上传地址
  filePath: 'xxx', // 录音文件路径
  name: 'xxx', // 文件名
  success: (res) => {
    console.log('上传录音成功', res)
  },
  fail: (err) => {
    console.log('上传录音失败', err)
  }
})

实战示例

// 开始录音
uni.startRecord()

// 5 秒后停止录音
setTimeout(() => {
  uni.stopRecord()
}, 5000)

// 播放录音
uni.playVoice({
  filePath: 'xxx' // 录音文件路径
})

// 上传录音
uni.uploadFile({
  url: 'xxx', // 上传地址
  filePath: 'xxx', // 录音文件路径
  name: 'xxx' // 文件名
})

注意要点

  • 录音时需要申请用户授权。
  • 录音文件默认保存到临时目录,需要及时保存到其他目录,否则会被清除。
  • 录音文件大小有限制,超过限制将停止录音。
  • 上传录音文件时需要提供服务器端接口。

常见问题解答

  1. 如何申请用户录音授权?
    在开始录音之前,需要使用 uni.authorize 方法申请用户授权。
  2. 如何获取录音文件路径?
    uni.stopRecord 方法的 filePath 属性中包含录音文件路径。
  3. 如何修改录音文件的存储位置?
    可以在 uni.startRecord 方法中指定 filePath 参数来修改录音文件的存储位置。
  4. 如何设置录音文件格式?
    可以在 uni.startRecord 方法中指定 format 参数来设置录音文件格式。
  5. 如何限制录音文件大小?
    可以在 uni.startRecord 方法中指定 maxDuration 参数来限制录音文件大小。

总结

uni-app 的录音功能为开发者提供了简便易用的方法来为他们的应用程序添加录音功能。通过遵循本文的指南,开发者可以轻松地集成此功能,从而增强用户体验并提供更多的交互性。