Maison  >  Article  >  interface Web  >  Comment implémenter la fonction de reconnaissance audio dans Uniapp

Comment implémenter la fonction de reconnaissance audio dans Uniapp

PHPz
PHPzoriginal
2023-07-05 14:18:092248parcourir

Comment implémenter la fonction de reconnaissance audio dans uniapp

Avec le développement continu de la technologie de l'intelligence artificielle, la reconnaissance vocale a été largement utilisée dans les applications mobiles et dans le domaine Internet. Il devient de plus en plus simple d'implémenter la fonction de reconnaissance audio dans uniapp. Cet article expliquera comment utiliser l'API Baidu Smart Cloud dans uniapp pour réaliser la fonction de reconnaissance audio et joindra les exemples de code correspondants.

1. Préparation

  1. Enregistrez un compte Baidu Smart Cloud et activez le service de reconnaissance vocale
    Enregistrez un compte sur le site officiel de Baidu Smart Cloud, activez le service de reconnaissance vocale selon les documents officiels et obtenez la clé API correspondante et clé secrète.
  2. Créez un projet uniapp
    Créez un projet uniapp dans HBuilder Ouvrez le terminal et exécutez la commande suivante :

    "permission": {
     "scope.userLocation": {
       "desc": "你的位置信息将用于小程序位置接口的效果展示"
     },
     "scope.record": {
       "desc": "将要使用录音功能"
     }
    }
  3. 3. Utilisez le plug-in de reconnaissance vocale Baidu
Introduisez le plug-in dans la page qui doit utiliser l'audio fonction de reconnaissance :

npm i uni-baidu-voice-recognition

Lors de l'utilisation de la reconnaissance vocale, nous pouvons passer voiceRecog.start() La méthode démarre l'enregistrement et renvoie le résultat de la reconnaissance vocale via l'objet Promise. Appelez la méthode voiceRecog.stop() pour arrêter l'enregistrement.

4. Configurez le plug-in de reconnaissance vocale Baidu
Dans le répertoire racine du projet, créez un dossier nommé uni-baidu-voice-recognition et créez manifest.json dans ce dossier code>, utilisé pour configurer les informations du plug-in. Ajoutez le contenu suivant au fichier :

<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>

Créez le fichier index.js sous le dossier uni-baidu-voice-recognition pour implémenter la fonction de reconnaissance vocale. Ajoutez le code suivant au fichier : voiceRecog.start()方法开始录音,并通过Promise对象返回语音识别的结果。调用voiceRecog.stop()方法停止录音。

四、配置百度语音识别插件
在项目根目录下,创建一个文件夹,名为uni-baidu-voice-recognition,在该文件夹下创建manifest.json文件,用来配置插件的信息。在该文件中添加以下内容:

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

uni-baidu-voice-recognition文件夹下创建index.js文件,用来实现语音识别的功能。在该文件中添加以下代码:

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

五、使用百度语音识别插件的APP Key和Secret Key
在项目根目录下,打开hbuilder-config.json

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

5. Utilisez la clé APP et la clé secrète du plug-in de reconnaissance vocale Baidu

Dans le répertoire racine du projet, ouvrez le fichier hbuilder-config.json et ajoutez le contenu suivant :

rrreee

Remplacez "votre appid" dans le code ci-dessus par la clé APP que vous avez demandée sur Baidu Smart Cloud, et remplacez "votre clé" et "votre secret" par la clé API et "Votre secret". vous avez obtenu la clé secrète de Baidu Smart Cloud.

À ce stade, le travail d'implémentation de la fonction de reconnaissance audio dans uniapp est terminé. Vous pouvez introduire un plug-in dans la page où vous devez utiliser la reconnaissance audio et utiliser les méthodes correspondantes dans l'événement de clic sur le bouton pour démarrer et arrêter l'enregistrement. En appelant l'API de reconnaissance vocale, vous pouvez obtenir les résultats de la reconnaissance vocale et les traiter en conséquence.

Résumé🎜Cet article présente comment implémenter la fonction de reconnaissance audio dans uniapp et fournit des exemples de code correspondants. En utilisant l'API de Baidu Smart Cloud, nous pouvons facilement ajouter une fonctionnalité de reconnaissance audio à uniapp, offrant ainsi plus de possibilités à nos applications. J'espère que cet article vous aidera à implémenter la fonction de reconnaissance audio dans uniapp. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn