Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die Audioerkennungsfunktion in Uniapp

So implementieren Sie die Audioerkennungsfunktion in Uniapp

PHPz
PHPzOriginal
2023-07-05 14:18:092187Durchsuche

So implementieren Sie die Audioerkennungsfunktion in uniapp

Mit der kontinuierlichen Weiterentwicklung der Technologie der künstlichen Intelligenz wird die Spracherkennung in mobilen Anwendungen und im Internetbereich häufig eingesetzt. Es wird immer einfacher, die Audioerkennungsfunktion in uniapp zu implementieren. In diesem Artikel wird erläutert, wie Sie die Baidu Smart Cloud-API in Uniapp verwenden, um die Audioerkennungsfunktion zu realisieren, und die entsprechenden Codebeispiele anhängen.

1. Vorbereitung

  1. Registrieren Sie ein Baidu Smart Cloud-Konto und aktivieren Sie den Spracherkennungsdienst.
    Registrieren Sie ein Konto auf der offiziellen Baidu Smart Cloud-Website, aktivieren Sie den Spracherkennungsdienst gemäß den offiziellen Dokumenten und erhalten Sie den entsprechenden API-Schlüssel und Geheimschlüssel.
  2. Erstellen Sie ein Uniapp-Projekt.
    Erstellen Sie ein Uniapp-Projekt in HBuilder. Öffnen Sie das Terminal und führen Sie den folgenden Befehl aus:

    "permission": {
     "scope.userLocation": {
       "desc": "你的位置信息将用于小程序位置接口的效果展示"
     },
     "scope.record": {
       "desc": "将要使用录音功能"
     }
    }
  3. 3. Verwenden Sie das Baidu-Spracherkennungs-Plug-in.
Fügen Sie das Plug-in auf der Seite ein, die das Audio verwenden muss Erkennungsfunktion:

npm i uni-baidu-voice-recognition

Bei Verwendung der Spracherkennung können wir voiceRecog.start() übergeben. Die Methode startet die Aufzeichnung und gibt das Spracherkennungsergebnis über das Promise-Objekt zurück. Rufen Sie die Methode voiceRecog.stop() auf, um die Aufnahme zu stoppen.

4. Konfigurieren Sie das Baidu-Spracherkennungs-Plug-in
Erstellen Sie im Stammverzeichnis des Projekts einen Ordner mit dem Namen uni-baidu-voice-recognition und erstellen Sie in diesem Ordner manifest.json code>-Datei, die zum Konfigurieren von Plug-In-Informationen verwendet wird. Fügen Sie der Datei den folgenden Inhalt hinzu:

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

Erstellen Sie die Datei index.js im Ordner uni-baidu-voice-recognition, um die Spracherkennungsfunktion zu implementieren. Fügen Sie der Datei den folgenden Code hinzu: 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. Verwenden Sie den APP-Schlüssel und den geheimen Schlüssel des Baidu-Spracherkennungs-Plug-ins.

Öffnen Sie im Stammverzeichnis des Projekts die Datei hbuilder-config.json und fügen Sie den folgenden Inhalt hinzu:

rrreee

Ersetzen Sie „Ihre App-ID“ im obigen Code durch den APP-Schlüssel, den Sie in der Baidu Smart Cloud beantragt haben, und ersetzen Sie „Ihr Schlüssel“ und „Ihr Geheimnis“ durch den API-Schlüssel und „Ihr Geheimnis“. Sie haben den geheimen Schlüssel der Baidu Smart Cloud erhalten.

Zu diesem Zeitpunkt ist die Arbeit zur Implementierung der Audioerkennungsfunktion in uniapp abgeschlossen. Sie können auf der Seite, auf der Sie die Audioerkennung verwenden müssen, ein Plug-In einführen und die entsprechenden Methoden im Schaltflächenklickereignis verwenden, um die Aufnahme zu starten und zu stoppen. Durch Aufrufen der Spracherkennungs-API können Sie die Ergebnisse der Spracherkennung abrufen und entsprechend verarbeiten.

Zusammenfassung🎜Dieser Artikel stellt die Implementierung der Audioerkennungsfunktion in Uniapp vor und stellt entsprechende Codebeispiele bereit. Durch die Verwendung der API von Baidu Smart Cloud können wir uniapp ganz einfach Audioerkennungsfunktionen hinzufügen und so unseren Anwendungen mehr Möglichkeiten bieten. Ich hoffe, dieser Artikel hilft Ihnen bei der Implementierung der Audioerkennungsfunktion in Uniapp. 🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Audioerkennungsfunktion in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn