Maison interface Web uni-app Comment implémenter la fonction de reconnaissance audio dans Uniapp

Comment implémenter la fonction de reconnaissance audio dans Uniapp

Jul 05, 2023 pm 02:18 PM
uniapp 实现 音频识别

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": "将要使用录音功能"
     }
    }
    Copier après la connexion
  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
Copier après la connexion

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 : </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;view&gt; &lt;button @tap=&quot;startRecognize&quot;&gt;开始录音&lt;/button&gt; &lt;button @tap=&quot;stopRecognize&quot;&gt;停止录音&lt;/button&gt; &lt;/view&gt; &lt;/template&gt; &lt;script&gt; import voiceRecog from 'uni-baidu-voice-recognition' export default { methods: { startRecognize() { voiceRecog.start({}) .then(res =&gt; { console.log('语音识别结果:', res.result) }) .catch(err =&gt; { console.log('语音识别失败:', err) }) }, stopRecognize() { voiceRecog.stop({}) } } } &lt;/script&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><p>Créez le fichier <code>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"
}
Copier après la connexion

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()
  }
}
Copier après la connexion

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

"apps": [
  {
    "type": "uni-app",
    "appid": "你的appid",
    "key": "你的key",
    "secret": "你的secret"
  }
]
Copier après la connexion
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 de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ? Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ? Mar 24, 2024 am 11:27 AM

Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ? Avec l’essor des réseaux sociaux, WeChat est devenu l’un des outils de communication indispensables dans la vie quotidienne des gens. Cependant, de nombreuses personnes peuvent rencontrer un problème : se connecter à plusieurs comptes WeChat en même temps sur le même téléphone mobile. Pour les utilisateurs de téléphones mobiles Huawei, il n'est pas difficile d'obtenir une double connexion WeChat. Cet article explique comment obtenir une double connexion WeChat sur les téléphones mobiles Huawei. Tout d'abord, le système EMUI fourni avec les téléphones mobiles Huawei offre une fonction très pratique : l'ouverture d'une double application. Grâce à la fonction de double ouverture de l'application, les utilisateurs peuvent simultanément

Comment démarrer l'aperçu du projet Uniapp développé par Webstorm Comment démarrer l'aperçu du projet Uniapp développé par Webstorm Apr 08, 2024 pm 06:42 PM

Étapes pour lancer l'aperçu du projet UniApp dans WebStorm : Installer le plugin UniApp Development Tools Se connecter aux paramètres de l'appareil Aperçu du lancement de WebSocket

Lequel est le meilleur, uniapp ou mui ? Lequel est le meilleur, uniapp ou mui ? Apr 06, 2024 am 05:18 AM

De manière générale, uni-app est préférable lorsque des fonctions natives complexes sont nécessaires ; MUI est meilleur lorsque des interfaces simples ou hautement personnalisées sont nécessaires. De plus, uni-app possède : 1. Prise en charge de Vue.js/JavaScript ; 2. Composants/API natifs riches 3. Bon écosystème ; Les inconvénients sont : 1. Problèmes de performances ; 2. Difficulté à personnaliser l'interface ; MUI a : 1. Prise en charge de la conception matérielle ; 2. Grande flexibilité ; 3. Bibliothèque étendue de composants/thèmes. Les inconvénients sont : 1. Dépendance CSS ; 2. Ne fournit pas de composants natifs ; 3. Petit écosystème ;

Guide de programmation PHP : méthodes pour implémenter la séquence de Fibonacci Guide de programmation PHP : méthodes pour implémenter la séquence de Fibonacci Mar 20, 2024 pm 04:54 PM

Le langage de programmation PHP est un outil puissant pour le développement Web, capable de prendre en charge une variété de logiques et d'algorithmes de programmation différents. Parmi eux, l’implémentation de la séquence de Fibonacci est un problème de programmation courant et classique. Dans cet article, nous présenterons comment utiliser le langage de programmation PHP pour implémenter la séquence de Fibonacci et joindrons des exemples de code spécifiques. La suite de Fibonacci est une suite mathématique définie comme suit : le premier et le deuxième élément de la suite valent 1, et à partir du troisième élément, la valeur de chaque élément est égale à la somme des deux éléments précédents. Les premiers éléments de la séquence

Comment implémenter la fonction de clonage WeChat sur les téléphones mobiles Huawei Comment implémenter la fonction de clonage WeChat sur les téléphones mobiles Huawei Mar 24, 2024 pm 06:03 PM

Comment mettre en œuvre la fonction de clonage WeChat sur les téléphones mobiles Huawei Avec la popularité des logiciels sociaux et l'importance croissante accordée à la confidentialité et à la sécurité, la fonction de clonage WeChat est progressivement devenue le centre d'attention. La fonction de clonage WeChat peut aider les utilisateurs à se connecter simultanément à plusieurs comptes WeChat sur le même téléphone mobile, ce qui facilite la gestion et l'utilisation. Il n'est pas difficile de mettre en œuvre la fonction de clonage WeChat sur les téléphones mobiles Huawei. Il vous suffit de suivre les étapes suivantes. Étape 1 : Assurez-vous que la version du système de téléphonie mobile et la version de WeChat répondent aux exigences. Tout d'abord, assurez-vous que la version de votre système de téléphonie mobile Huawei a été mise à jour vers la dernière version, ainsi que l'application WeChat.

Quels outils de développement uniapp utilise-t-il ? Quels outils de développement uniapp utilise-t-il ? Apr 06, 2024 am 04:27 AM

UniApp utilise HBuilder

Quels sont les inconvénients d'Uniapp Quels sont les inconvénients d'Uniapp Apr 06, 2024 am 04:06 AM

UniApp présente de nombreux avantages en tant que cadre de développement multiplateforme, mais ses inconvénients sont également évidents : les performances sont limitées par le mode de développement hybride, ce qui entraîne une vitesse d'ouverture, un rendu des pages et une réponse interactive médiocres. L'écosystème est imparfait et il existe peu de composants et de bibliothèques dans des domaines spécifiques, ce qui limite la créativité et la réalisation de fonctions complexes. Les problèmes de compatibilité sur différentes plates-formes sont sujets à des différences de style et à une prise en charge incohérente des API. Le mécanisme de sécurité de WebView est différent de celui des applications natives, ce qui peut réduire la sécurité des applications. Les versions et mises à jour d'applications prenant en charge plusieurs plates-formes en même temps nécessitent plusieurs compilations et packages, ce qui augmente les coûts de développement et de maintenance.

Quelles sont les bases nécessaires pour apprendre Uniapp ? Quelles sont les bases nécessaires pour apprendre Uniapp ? Apr 06, 2024 am 04:45 AM

Le développement d'Uniapp nécessite les bases suivantes : technologie front-end (HTML, CSS, JavaScript) connaissance du développement mobile (plateformes iOS et Android) autres bases de Node.js (outils de contrôle de version, IDE, simulateur de développement mobile ou expérience réelle du débogage machine)

See all articles