Speech Recognition on the Web (Frontend Conf Zürich 2017)

Advances in artificial intelligence and machine learning in terms of understanding spoken language have triggered a proliferation of commercial applications and services that understand our voice. The likes of Siri, Alexa, Google Now, and Cortana, are very impressive when it comes to understanding free form speech, but is it possible to take advantage of the powerful speech recognition behind such services on the web? This talk will explore the speech recognition process and how the Web Speech API can be used to empower web applications for improved accessibility and new ways of user interaction.

Transcript

2. Mihai Cîrlănaru Software Development Lead
22. DEMO github.com/mihai/talk.js
23. Web Speech API Spec bit.ly/WebSpeechSpec
24. Web Speech API bit.ly/WebSpeechAPI const SpeechRecognition = SpeechRecognition || webkitSpeechRecognition; let recognizer = null; if (!SpeechRecognition) { console.error("Web Speech APIs not supported in your browser"); } else { recognizer = new SpeechRecognition(); }
25. Speech Recognition Attributes bit.ly/WebSpeechAPI // Sets the language to be recognized (32 languages // supported, incl. Romanian) recognizer.lang = 'en­US'; // Get recognition results as early as possible, // even if they will change recognizer.interimResults = true; // Continuously listen to speech, regardless if // the user takes pauses or not recognizer.continuous = true; // The number of alternative recognition // matches to be returned recognizer.maxAlternatives = 3; …
26. Speech Recognition Event Handlers bit.ly/WebSpeechAPI recognizer.onresult // Whenever a speech recognition match is found recognizer.onnomatch // When no match was found for the current speech recognizer.onerror // When an error occurred …
27. Speech Recognition Control bit.ly/WebSpeechAPI recognizer.start(); recognizer.abort(); recognizer.stop();
28. Speech Recognition Result format bit.ly/WebSpeechAPI // results[i][0].transcript ­­ top confidence transcription for result i { results: [ // SpeechRecognitionResultList [ // SpeechRecognitionResult { // SpeechRecognitionAlternative transcript: "hello", confidence: 0.8999, isFinal: false }, { // SpeechRecognitionAlternative transcript: "world", confidence: 0.4792, isFinal: false } ], ] … }
29. Privacy bit.ly/WebSpeechAPI
30. Browser Support caniuse.com/#feat=speech-recognition