Wdrożenie rozpoznawania mowy wydaje się trudnym zadaniem, ale dzięki bibliotece o nazwie annyang możesz wdrożyć podstawową konfigurację w 5 minut. Spójrz na ich demo. Może to sprawi, że będziesz chciał się tego uczyć jeszcze bardziej.

Pokażę ci jak to działa. Zrobimy przykład, który akceptuje 2 polecenia głosowe: „Witam” i „Do widzenia”. Następnie zareaguje odpowiednio.

Ponieważ usługa nie pozwala na wywołanie jej z hosta lokalnego przy użyciu prostego pliku Index.html, utwórzmy bardzo prostą aplikację węzłową, aby zobaczyć ją w akcji. Sprawdź kod lub postępuj zgodnie z poniższymi wskazówkami:

Konfigurowanie aplikacji węzła

Za pomocą terminala utwórz folder projektu o nazwie annyang, a w nim utwórz plik index.js

mkdir annyang // make the folder
cd annyang // go to the folder
touch index.js // create the file

Aby szybko zbudować naszą aplikację węzła, zainstaluj express i ejs

npm install express ejs

Utwórz plik o nazwie app.js

touch app.js

Wklej to do app.js:

const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/', function(req, res) {  
  res.render('index', { title: 'The index page!' })
});
app.listen(3000, () => console.log('Example app listening on port 3000!'))

Jest to bardzo prosta aplikacja węzła. Przede wszystkim widzimy, że wywoła nasz plik indeksu z naszym kodem rozpoznawania mowy, gdy ktoś uruchomi aplikację. Stwórzmy ten plik.

Wróć do terminala i utwórz folder o nazwie views, a w nim plik Index.ejs

mkdir views // make the folder
cd views // go to the folder
touch index.ejs // make the file

Kod rozpoznawania mowy

Wklej ten kod do pliku Index.ejs:

<!DOCTYPE html>
<html>
<head>
 <title>Annyang</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
   <script>
     if (annyang) {
       // Let's define a command.
       var commands = {
         'hello': function() { alert('Hey! How are you?'); },
         'goodbye': function() { alert('See you later!'); }
       };
       // This should be true
       console.log(annyang.isListening())
       // Add our commands to annyang
       annyang.addCommands(commands);
       // Start listening.
       annyang.start();
       annyang.addCallback('soundstart', function() {
         console.log('sound detected');
       });
     }
    </script>
  </head>
  <body>
    <h1>Say hello or goodbye</h1>
  </body>
</html>

Rozłóżmy kod. Najpierw importujemy anyang za pomocą CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>

Uwaga: ponieważ importujemy express i ejs jako pakiety węzłów, próbowałem zainstalować annyang przez npm, ale nie działało to dobrze, więc przeszedłem na metodę CDN.

Następny znacznik skryptu zawiera nasz kod rozpoznawania mowy. Sprawdzamy, czy biblioteka annyang została zarejestrowana, a jeśli tak:

  1. Tworzymy komendy ( Witam i Żegnam)
  2. Dodaj polecenia
  3. Zacznij słuchać
  4. Dodaj wywołanie zwrotne, które poinformuje nas, czy wykryto dźwięk

Wypróbuj to

Uruchom aplikację, wpisując to w terminalu:

node app.js
  • Otwórz przeglądarkę i przejdź do localhost:3000
  • Przeglądarka powinna zapytać o pozwolenie na użycie mikrofonu. Zaakceptować.
  • Powiedz cześć". Pojawi się alert z powitaniem!

Teraz możesz dostosować swoje polecenia i odpowiedzi. Teoretycznie umożliwia to łatwą integrację rozpoznawania mowy z innymi technologiami. W praktyce nie jest jeszcze tak niezawodny, jak byśmy tego chcieli. Niektóre polecenia nie działają, a po pewnym czasie aplikacja może przestać działać. W każdym razie przyszłość rozpoznawania mowy rysuje się w jasnych barwach, a to dowodzi, że JavaScript będzie błyszczał tuż obok niej.

Miłego kodowania,

Iwan