How to implement audio recognition function in uniapp

How to implement audio recognition function in uniapp

With the continuous development of artificial intelligence technology, speech recognition has been widely used in mobile applications and the Internet field. It is becoming easier and easier to implement the audio recognition function in uniapp. This article will introduce how to use Baidu Smart Cloud API in uniapp to realize the audio recognition function, and attach the corresponding code examples.

1. Preparation

1. Register a Baidu Smart Cloud account and activate the speech recognition service
   Register an account on the Baidu Smart Cloud official website and activate speech recognition according to the official documents service and obtain the corresponding API Key and Secret Key.

2. Create a uniapp project
   Create a uniapp project in HBuilder X, enter the project directory, open the manifest.json file, and add the following permissions:

   "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    },
    "scope.record": {
      "desc": "将要使用录音功能"
    }
   }

2. Introduce the Baidu speech recognition plug-in
In the project root directory, open the terminal and execute the following command:

npm i uni-baidu-voice-recognition

3. Use the Baidu speech recognition plug-in
In the page where the audio recognition function is required Introducing the plug-in:

<template>
  <view>
    <button @tap="startRecognize">开始录音</button>
    <button @tap="stopRecognize">停止录音</button>
  </view>
</template>

<script>
  import voiceRecog from 'uni-baidu-voice-recognition'
  
  export default {
    methods: {
      startRecognize() {
        voiceRecog.start({})
          .then(res => {
            console.log('语音识别结果：', res.result)
          })
          .catch(err => {
            console.log('语音识别失败：', err)
          })
      },
      stopRecognize() {
        voiceRecog.stop({})
      }
    }
  }
</script>

When using speech recognition, we can start recording through the voiceRecog.start() method and return the speech recognition results through the Promise object. Call the voiceRecog.stop() method to stop recording.

4. Configure Baidu Speech Recognition Plug-in
In the project root directory, create a folder named uni-baidu-voice-recognition, and create itmanifest.json file is used to configure plug-in information. Add the following content to the file:

{
  "minPlatformVersion": "1060",
  "name": "uni-baidu-voice-recognition",
  "version": "1.0.0",
  "description": "百度语音识别插件",
  "main": "index.js"
}

Create the index.js file under the uni-baidu-voice-recognition folder to implement speech recognition Function. Add the following code to the file:

import VoiceRecogPlugin from "voice-module"

export default {
  start(options) {
    return new Promise((resolve, reject) => {
      VoiceRecogPlugin.start(options)
        .then(res => {
          resolve(res)
        })
        .catch(err => {
          reject(err)
        })
    })
  },
  stop() {
    VoiceRecogPlugin.stop()
  }
}

5. Use the APP Key and Secret Key of the Baidu speech recognition plug-in
In the project root directory, open the hbuilder-config.json file , add the following content:

"apps": [
  {
    "type": "uni-app",
    "appid": "你的appid",
    "key": "你的key",
    "secret": "你的secret"
  }
]

Replace "your appid" in the above code with the APP Key you applied for on Baidu Smart Cloud, and replace "your key" and "your secret" with your API Key and Secret Key obtained from Baidu Smart Cloud.

At this point, the work of implementing the audio recognition function in uniapp has been completed. You can introduce a plug-in into the page where you need to use audio recognition, and use the corresponding methods in the button click event to start and stop recording. By calling the speech recognition API, you can obtain the results of speech recognition and process them accordingly.

Summary
This article introduces how to implement the audio recognition function in uniapp and provides corresponding code examples. By using Baidu Smart Cloud's API, we can easily add audio recognition functionality to uniapp, bringing more possibilities to our applications. I hope this article will help you implement audio recognition function in uniapp.

The above is the detailed content of How to implement audio recognition function in uniapp. For more information, please follow other related articles on the PHP Chinese website!