Vosk-Browser: Spracherkennungsprogramm in einem Browser

vosk-browser ist ein Spracherkennungsprogramm, das im Browser läuft. Es basiert auf der WebAssembly-Technologie und verwendet die Vosk-Spracherkennungsbibliothek. Es unterstützt die Verarbeitung von Mikrofoneingaben oder Audiodateien direkt im Browser und bietet Offline-Sprache-zu-Text-Funktionalität, ohne auf Cloud-Server angewiesen zu sein. Das Tool unterstützt 13 Sprachen, darunter Englisch, Deutsch, Französisch, Spanisch usw., und eignet sich für Entwickler, die Spracherkennung im Browser implementieren müssen. vosk-browser läuft über WebWorker, was die Leistung optimiert und ein Blockieren des Hauptbrowser-Threads vermeidet. Benutzer können das Modell laden und die Spracherkennung mit einfachem JavaScript-Code starten, wodurch es sich für Szenarien wie Chatbots, Smart Homes oder die Erzeugung von Untertiteln eignet. Das von Ciaran O'Reilly entwickelte Projekt wird auf GitHub gehostet und verfügt über mehr als 450 Sterne und eine aktive Community.

Funktionsliste

• Offline-SpracherkennungSprachsteuerung: Verarbeitet Spracheingaben im Browser, ohne dass eine Internetverbindung erforderlich ist, und schützt so die Privatsphäre des Benutzers.
• Unterstützung mehrerer SprachenEnglisch, Deutsch, Französisch, Spanisch und 13 weitere Sprachen werden unterstützt, und das Modell ist erweiterbar.
• Mikrofon und Audiodatei-EingangKann Live-Mikrofoneingaben oder hochgeladene Audiodateien verarbeiten.
• WebAssembly-OptimierungLäuft durch WebAssembly und WebWorker und stellt sicher, dass es effizient ist und den Browser nicht blockiert.
• einfache IntegrationInstallation über CDN oder npm, Unterstützung für das schnelle Einbetten von Webseiten.
• Ausgabe der Ergebnisse in EchtzeitBietet Echtzeit- und Teilerkennungsergebnisse, geeignet für dynamische Interaktionsszenarien.
• Flexibles Laden von ModellenUnterstützung für das Laden verschiedener Sprachmodelle, die in einem komprimierten Format gespeichert sind und eine geringe Größe haben.

Hilfe verwenden

Einbauverfahren

Der vosk-Browser ist sehr einfach zu benutzen und Entwickler können ihn auf folgende Weise in Webseiten integrieren:

1. Eingeführt über CDN::
   Fügen Sie den folgenden Code in die HTML-Datei ein, um die Bibliothek vosk-browser in die Seite zu laden:

   <script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vosk-browser@0.0.5/dist/vosk.js"></script>
   

   Nach dem Laden desVosk Globale Variablen können in JavaScript verwendet werden. Die neueste Version ist 0.0.8, wir empfehlen, npm oder jsDelivr auf die neueste Version zu prüfen.

2. Installation über npm::
   Wenn Sie mit modularer Entwicklung arbeiten, können Sie es über npm installieren:

   npm install vosk-browser
   

   Dann importieren Sie sie in eine JavaScript-Datei:

   import * as Vosk from 'vosk-browser';
   

3. Sprachmodelle herunterladen::
   vosk-browser muss die Sprachmodelldatei laden (im Format von .tar.gz), zum Beispiel vosk-model-small-en-us-0.15.tar.gz. Diese Modelle können über die offiziell bereitgestellten Links heruntergeladen werden (z. B. https://ccoreilly.github.io/vosk-browser/models/) Herunterladen. Die Modelldatei enthält die Konfigurationsdateien und Daten, die für die Spracherkennung erforderlich sind, wie z. B. mfcc.conf im Gesang antworten model.conf. Bei hochpräzisen Modellen ist die mfcc_hires.conf. Legen Sie die Modelldatei unter demselben Pfad wie das Skript ab oder geben Sie die URL des Modells an.

Verwendungsschritte

Im Folgenden werden die Schritte zur Implementierung der Spracherkennung mit vosk-browser detailliert beschrieben:

1. Modelle laden::
   ausnutzen Vosk.Model Der Konstruktor lädt das Modell. Angenommen, die Modelldatei lautet model.tar.gzDer Code lautet wie folgt:

   async function loadModel() {
   const model = await Vosk.createModel('model.tar.gz');
   return model;
   }
   

   Das Laden der Modelle kann einige Sekunden dauern, je nach Dateigröße und Netzwerkgeschwindigkeit. Es wird empfohlen, kleine Modelle (z. B. 50 MB) zu verwenden, um die Ladegeschwindigkeit zu erhöhen.

2. Initialisierung des Erkenners::
   Erstellen Sie den Erkenner und geben Sie die Abtastrate an (in der Regel im Einklang mit dem Audiokontext, z. B. 16000 Hz):

   async function startRecognition(model) {
   const ctx = new AudioContext();
   const recognizer = await Vosk.createRecognizer(model, ctx.sampleRate);
   return { recognizer, ctx };
   }
   

3. Mikrofoneingang einfangen::
   Verwenden Sie die Browserfunktion navigator.mediaDevices.getUserMedia Holen Sie sich den Mikrofoneingang:

   async function setupMic(ctx) {
   const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
   const micNode = ctx.createMediaStreamSource(stream);
   return micNode;
   }
   

4. Verarbeitung der Identifikationsergebnisse::
   überwachen result im Gesang antworten partialResult Ereignis, um ein vollständiges oder teilweises Erkennungsergebnis zu erhalten:

   recognizer.addEventListener('result', (ev) => {
   console.log('完整结果:', ev.detail.text);
   });
   recognizer.addEventListener('partialResult', (ev) => {
   console.log('部分结果:', ev.detail.text);
   });
   

5. Übertragen von Audiodaten::
   Überträgt die Audiodaten des Mikrofons an den Erkenner:

   async function connectAudio(ctx, micNode, recognizer) {
   const transferer = await Vosk.createTransferer(ctx, 128 * 150);
   transferer.port.onmessage = (ev) => recognizer.acceptWaveform(ev.data);
   micNode.connect(transferer);
   }
   

6. Erkennung aktivieren::
   Kombinieren Sie die oben genannten Schritte, um die Spracherkennung zu starten:

   async function start() {
   const model = await loadModel();
   const { recognizer, ctx } = await startRecognition(model);
   const micNode = await setupMic(ctx);
   await connectAudio(ctx, micNode, recognizer);
   }
   document.getElementById('startButton').onclick = start;
   

Featured Function Bedienung

• Echtzeiterfassung: durch partialResult Ereignisse können Entwickler Teilerkennungsergebnisse in Echtzeit erhalten, während der Benutzer spricht, was sich für Chatbot- oder Echtzeit-Untertitelungsszenarien eignet.
• Mehrsprachige UmschaltungErsetzen Sie einfach die Modelldatei (z. B. vosk-model-fr-0.22.tar.gz (Wechsel zu Französisch), um andere Sprachen zu unterstützen, ohne den Code zu ändern.
• Offline-BetriebDie gesamte Verarbeitung erfolgt lokal im Browser ohne Serverunterstützung, was für datenschutzsensible Szenarien geeignet ist.
• VeranstaltungsmanagementUnterstützung für dynamisches Hinzufügen oder Entfernen von Ereignis-Listenern. Zum Beispiel das Entfernen eines Ergebnis-Listeners:

  recognizer.removeEventListener('result', callbackFunction);
  

  Dies ist bei dynamischen Schnittstellen wie Vue.js-Anwendungen nützlich.

caveat

• Auswahl des ModellsKleine Modelle sind für schnelles Laden geeignet, aber mit geringer Genauigkeit; große Modelle (z. B. mit rescore Modelle) sind genauer, benötigen aber mehr Speicherplatz.
• Browser-KompatibilitätStellen Sie sicher, dass Ihr Browser WebAssembly und Web-Audio-APIs unterstützt (z. B. Chrome, Firefox).
• LeistungsoptimierungWebWorker: Verwenden Sie WebWorker, um zu vermeiden, dass der Haupt-Thread blockiert wird, aber beachten Sie, dass die Ladezeit des Modells lang sein kann und es wird empfohlen, das Modell vorab zu laden.

Anwendungsszenario

1. Chatbot
   Entwickler können vosk-browser in Web-Chatbots für Sprachinteraktion über Mikrofoneingabe integrieren, die sich für Online-Kundenservice oder virtuelle Assistenten eignen.
2. Untertitel Generation
   Nach dem Hochladen von Audiodateien generiert vosk-browser Untertitel für die Ersteller von Videoinhalten oder Bildungsplattformen.
3. Intelligente Haussteuerung
   Ermöglicht die Erkennung von Sprachbefehlen im Browser zur Steuerung intelligenter Geräte, z. B. zum Ein- und Ausschalten der Beleuchtung oder zum Einstellen der Temperatur.
4. Tools zum Sprachenlernen
   Die Schüler können ihre Aussprache über das Mikrofon üben, und der vosk-Browser liefert Echtzeit-Feedback zum Aussprachetext, um das Sprechen zu verbessern.

QA

1. Benötigt vosk-browser eine Internetverbindung?
   Nicht erforderlich. vosk-browser unterstützt den vollständigen Offline-Betrieb, wobei die Modellierung und Verarbeitung lokal erfolgt, was für netzlose Umgebungen geeignet ist.
2. Welche Sprachen werden unterstützt?
   Derzeit werden 13 Sprachen unterstützt, darunter Englisch, Deutsch, Französisch, Spanisch usw., und weitere Sprachen können in Zukunft durch neue Modelle ergänzt werden.
3. Wie können wir die Erkennungsgenauigkeit verbessern?
   Die Verwendung hochpräziser Modelle (z. B. mit rescore Modell) und stellen Sie sicher, dass das Mikrofon von guter Qualität ist. Stellen Sie das Modell model.conf Auch die Dekodierungsparameter in der Datei können die Ergebnisse optimieren.
4. Warum ist die Erkennung verzögert?
   Die Latenz kann durch die Ladezeit des Modells oder die Leistung der Hardware verursacht werden. Es wird empfohlen, kleinere Modelle zu verwenden oder die Browserleistung zu optimieren.