Ciąg dalszy Audio – rozpoznawanie mowy

Cześć! Cieszę się, że mnie odwiedziłeś/aś. Zanim przejdziesz do artykułu chciałbym zwrocić Ci uwagę na to, że ten artykuł był pisany kilka lat temu (2016-02-20) miej więc proszę na uwadzę że rozwiązania i przemyślenia które tu znajdziesz nie muszą być aktualne. Niemniej jednak zachęcam do przeczytania.

Witam ponownie ;)

Przy okazji zbierania materiałów na poprzedni wpis natknąłem się na możliwość rozpoznawania mowy. To na tyle fajne zagadnienie że postanowiłem napisać osobny wpis na ten temat.

A więc specyfikację możecie sobie zobaczyć tutaj.

Od razu zaznaczę iż używać tego możemy na razie tylko w Google Chrome – zerknij na Can I use.

Zacznijmy od kawałka HTMLa:

1
2
3
4
5
6
7
8
9
<html>
<head>
</head>
<body>
<div style="width:50%;height:50%;border:2px solid;margin: 0 auto;" id="result">
</div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>

Wynik rozpoznawania będziemy pisać do tego diva #result.

I kawałek JSa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var resultElement = document.getElementById("result");

var handleResult = function(results){
  var result = results[results.length-1];
  resultElement.innerHTML = result[0].transcript;
}

var recognition = new webkitSpeechRecognition();
recognition.lang = "pl-PL";
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = function(event) {
  console.log(event)
  handleResult(event.results);
}
recognition.start();

Używamy obiektu klasy webkitSpeechRecognition. Ustawiamy mu język polski. Opcja continuous pozwala na ciągłe przetwarzanie głosu – tzn będzie przetwarzać głos mimo odebrania pierwszego finalnego rezultatu. Ustawienie pola interimResults pozwala nam uzyskiwać nie ostateczne rezultaty. Czyli będziemy na ekranie widzieć cały proces dopasowywania dźwięku, przykładowo jeśli powiemy np. słowo „motor” to pierwszym słowem które znajdzie będzie słowo „moto” a następnym już „motor” i słowo „motor” będzie słowem finalnym a słowo „moto” słowem w procesie dopasowywania które będzie widoczne na ekranie dzięki własnie opcji interimResults .

Hahahah całkiem ciekawą rzeczą jest że on cenzuruje bluźnierstwa ;) co znaczy że jeśli powiem mu brzydkie słowo na „k” to rezultat będzie „k****”.

Zapraszam do pobawienia się:

DEMO

Dzięki za wizytę,
Mateusz Mazurek
Mateusz M.

Pokaż komentarze

  • Całkiem fajnie to wygląda, mam tylko jedno pytanie czy jest możliwość zrobienia przycisku który to będzie uruchamiał? Wyobrażam sobie sytuację że ktoś to zaimplementuje na swojej stronie w wyszukiwarce, osoba przeglądająca taką stronę dostając od razu komunikat o tym że chcemy dostępu do mikrofonu po prostu ucieknie nie wiedząc po co to nam. taki przycisk np. przy wyszukiwarce coś jak w google byłby super dopełnieniem całości.

Ostatnie wpisy

Podsumowanie: maj, czerwiec, lipiec i sierpień 2024

Oj daaawnoo mnie tu nie było. Ale wakacje to był czas dużej liczby intensywnych wyjazdów i tak naprawdę, dopiero jakoś… Read More

2 miesiące ago

Podsumowanie: kwiecień 2024

Cześć! Zapraszam na krótkie podsumowanie kwietnia. Wyjazd do Niemiec A dokładniej pod granicę z Francją. Chrześnica miała pierwszą komunię. Po… Read More

6 miesięcy ago

Podsumowanie: luty i marzec 2024

Ostatnio tygodnie były tak bardzo wypełnione, że nie udało mi się napisać nawet krótkiego podsumowanie. Więc dziś zbiorczo podsumuję luty… Read More

7 miesięcy ago

Podsumowanie: styczeń 2024

Zapraszam na krótkie podsumowanie miesiąca. Książki W styczniu przeczytałem "Homo Deus: Historia jutra". Książka łudząco podoba do wcześniejszej książki tego… Read More

9 miesięcy ago

Podsumowanie roku 2023

Cześć! Zapraszam na podsumowanie roku 2023. Książki Zacznijmy od książek. W tym roku cel 35 książek nie został osiągnięty. Niemniej… Read More

10 miesięcy ago

Podsumowanie: grudzień 2023

Zapraszam na krótkie podsumowanie miesiąca. Książki W grudniu skończyłem czytać Mein Kampf. Nudna książka. Ciekawsze fragmenty można by było streścić… Read More

11 miesięcy ago