uniapp轻松实现语音输入功能，掌握高阶玩法！

2023-03-30 19:59:31

在 UniApp 中轻松实现语音输入：一个分步指南

在当今数字化的时代，语音交互已成为移动应用程序中不可或缺的一部分。UniApp 作为跨平台开发框架，也提供了丰富的语音输入功能。本文将分步指导你如何在 UniApp 应用中轻松实现语音输入，助力你的应用提升交互体验。

准备工作

踏上语音输入之旅的第一步是准备工作：

确保你的 UniApp 版本为最新版本（1.2.0 或更高），因为较低版本不支持语音输入。
在 manifest.json 文件中添加必要的权限：

"permission": {
  "microphone": true
}

代码实现

准备好必要的权限后，就可以开始代码实现了：

触发事件： 在 UniApp 页面中，添加一个按钮或其他元素来触发语音输入事件，例如：

<button @click="startRecord">开始录音</button>

存储结果： 在页面中定义一个 data 方法来存储语音输入的结果，如下所示：

data() {
  return {
    voiceText: ''
  }
}

处理事件： 在页面中定义一个 methods 方法来处理语音输入事件，如下所示：

methods: {
  startRecord() {
    uni.startRecord({
      success: (res) => {
        console.log('录音成功', res)
      },
      fail: (err) => {
        console.log('录音失败', err)
      }
    })
  },
  stopRecord() {
    uni.stopRecord({
      success: (res) => {
        console.log('停止录音成功', res)
        // 将语音结果存储在 data 中
        this.voiceText = res.tempFilePath
      },
      fail: (err) => {
        console.log('停止录音失败', err)
      }
    })
  }
}