Převod z řeči na text pomocí JavaScriptu

V tomto tutoriálu budeme experimentovat s rozhraním Web Speech API. Je to velmi výkonné rozhraní prohlížeče, které vám umožňuje zaznamenávat lidskou řeč a převádět ji na text. Použijeme to i k opaku – předčítání strun lidským hlasem.

Pojďme rovnou do toho!

Aplikace

Abychom předvedli schopnosti API, vytvoříme jednoduchou aplikaci pro poznámky s hlasovým ovládáním. Dělá to 3 věci:

• Zaznamenává poznámky pomocí převodu hlasu na text nebo tradičního vstupu z klávesnice.
• Uloží poznámky do localStorage.
• Zobrazuje všechny poznámky a dává možnost si je poslechnout prostřednictvím syntézy řeči.

Nebudeme používat žádné efektní závislosti, jen staré dobré jQuery pro jednodušší operace DOM a Shoelace pro styly CSS. Zahrneme je přímo přes CDN, není třeba zapojovat NPM do tak malého projektu.

HTML a CSS jsou docela standardní, takže je přeskočíme a přejdeme rovnou k JavaScriptu. Chcete-li zobrazit úplný zdrojový kód, přejděte na Stáhnout v horní části stránky.

Převod řeči na text

Web Speech API je ve skutečnosti rozděleno do dvou zcela nezávislých rozhraní. Máme SpeechRecognition pro pochopení lidského hlasu a jeho přeměnu na text (Speech -> Text) a SpeechSynthesis pro čtení řetězců nahlas počítačem generovaným hlasem (Text -> Speech). Začneme tím prvním.

Rozhraní Speech Recognition API je na bezplatnou funkci prohlížeče překvapivě přesné. Rozpoznal správně téměř celý můj mluvený projev a věděl, která slova spolu tvoří fráze, které dávají smysl. Umožňuje také diktovat speciální znaky, jako jsou tečky, otazníky a nové řádky.

První věc, kterou musíme udělat, je zkontrolovat, zda má uživatel přístup k API, a zobrazit příslušnou chybovou zprávu. Rozhraní API pro převod řeči na text je bohužel podporováno pouze v prohlížečích Chrome a Firefox (s příznakem), takže tuto zprávu pravděpodobně uvidí mnoho lidí.

try {
  var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  var recognition = new SpeechRecognition();
}
catch(e) {
  console.error(e);
  $('.no-browser-support').show();
  $('.app').hide();
}

recognition proměnná nám umožní přístup ke všem metodám a vlastnostem API. K dispozici jsou různé možnosti, ale my nastavíme pouze recognition.continuous na pravdu. To uživatelům umožní mluvit s delšími pauzami mezi slovy a frázemi.

Než budeme moci používat rozpoznávání hlasu, musíme také nastavit několik obslužných rutin událostí. Většina z nich jednoduše poslouchá změny stavu rozpoznávání:

recognition.onstart = function() { 
  instructions.text('Voice recognition activated. Try speaking into the microphone.');
}

recognition.onspeechend = function() {
  instructions.text('You were quiet for a while so voice recognition turned itself off.');
}

recognition.onerror = function(event) {
  if(event.error == 'no-speech') {
    instructions.text('No speech was detected. Try again.');  
  };
}

Existuje však speciální onresult událost, která je velmi zásadní. Provádí se pokaždé, když uživatel vysloví slovo nebo několik slov v rychlém sledu, což nám umožňuje přístup k textovému přepisu toho, co bylo řečeno.

Když něco zachytíme pomocí onresult handler jej uložíme do globální proměnné a zobrazíme v textové oblasti:

recognition.onresult = function(event) {

  // event is a SpeechRecognitionEvent object.
  // It holds all the lines we have captured so far. 
  // We only need the current one.
  var current = event.resultIndex;

  // Get a transcript of what was said.
  var transcript = event.results[current][0].transcript;

  // Add the current transcript to the contents of our Note.
  noteContent += transcript;
  noteTextarea.val(noteContent);
}

Výše uvedený kód je mírně zjednodušen. Na zařízeních Android je velmi podivná chyba, která způsobuje, že se vše opakuje dvakrát. Zatím neexistuje žádné oficiální řešení, ale podařilo se nám problém vyřešit bez zjevných vedlejších účinků. S ohledem na tuto chybu vypadá kód takto:

var mobileRepeatBug = (current == 1 && transcript == event.results[0][0].transcript);

if(!mobileRepeatBug) {
  noteContent += transcript;
  noteTextarea.val(noteContent);
}

Jakmile máme vše nastaveno, můžeme začít používat funkci rozpoznávání hlasu prohlížeče. Chcete-li jej spustit, jednoduše zavolejte start() metoda:

$('#start-record-btn').on('click', function(e) {
  recognition.start();
});

To vyzve uživatele k udělení povolení. Pokud je to povoleno, bude aktivován mikrofon zařízení.

Prohlížeč bude chvíli poslouchat a každá rozpoznaná fráze nebo slovo se přepíše. Rozhraní API přestane naslouchat automaticky po několika sekundách ticha nebo po ručním zastavení.

$('#pause-record-btn').on('click', function(e) {
  recognition.stop();
});

Tím je část naší aplikace pro převod řeči na text dokončena! Nyní udělejme opak!

Převod textu na řeč

Syntetika řeči je ve skutečnosti velmi snadná. API je přístupné přes objekt speechSynthesis a existuje několik metod pro přehrávání, pozastavení a další věci související se zvukem. Má také několik skvělých možností, které mění výšku, rychlost a dokonce i hlas čtenáře.

Vše, co ve skutečnosti budeme potřebovat pro naše demo, je speak() metoda. Očekává jeden argument, instanci krásně pojmenovaného SpeechSynthesisUtterance třída.

Zde je celý kód potřebný k přečtení řetězce.

function readOutLoud(message) {
  var speech = new SpeechSynthesisUtterance();

  // Set the text and voice attributes.
  speech.text = message;
  speech.volume = 1;
  speech.rate = 1;
  speech.pitch = 1;

  window.speechSynthesis.speak(speech);
}

Když je tato funkce zavolána, robotický hlas přečte zadaný řetězec a udělá to nejlepším lidským dojmem.

Závěr

V době, kdy jsou hlasoví asistenti populárnější než kdykoli předtím, vám API, jako je toto, poskytuje rychlou zkratku k vytváření robotů, kteří rozumí a mluví lidskou řečí.

Přidání hlasového ovládání do vašich aplikací může být také skvělou formou vylepšení usnadnění. Uživatelé se zrakovým postižením mohou těžit z uživatelského rozhraní převodu řeči na text i převodu textu na řeč.

Rozhraní API pro syntézu řeči a rozpoznávání řeči fungují docela dobře a snadno si poradí s různými jazyky a akcenty. Bohužel mají prozatím omezenou podporu prohlížeče, což zužuje jejich použití ve výrobě. Pokud potřebujete spolehlivější formu rozpoznávání řeči, podívejte se na tato rozhraní API třetích stran:

• Google Cloud Speech API
• Bing Speech API
• CMUSphinx a jeho JavaScript verze Pocketsphinx (obě open-source).
• API.AI – bezplatné Google API využívající strojové učení