Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web_speech_api_using_angular_Js.pdf

Avatar for Vidya Sekhar Vidya Sekhar
September 13, 2016
42

 Web_speech_api_using_angular_Js.pdf

Avatar for Vidya Sekhar

Vidya Sekhar

September 13, 2016

Transcript

  1. WHAT IS WEB SPEECH API • Web Speech API allows

    us to add speech capabilities to our web applications. • Speech capabilities include the ability of a software to recognize sound as speech and respond using audio output devices • Speech capabilities allow developers to build applications that support accessibility features, translations, search applications, filling up of forms, etc.
  2. SPEECH RECOGNITION • Speech to Text – uses a recognition

    engine that takes audio input or speech from user’s microphone and processes it by matching audio signals to patterns. • The patterns are then associated to words in a grammar database. • The recognition engine typically returns a hypothesis, a list of alternatives, possible words that match the speech. • Each alternative is given a confidence score that indicates level of accuracy.
  3. SPEECH SYNTHESIS • Text to Speech – uses a synthesis

    engine that takes a text and converts the text into words or phrases. • The synthesis engine uses different recorded sound bites to generate a variety of tones, accent and natural sounds. • The ability to convert Text to Speech is relatively simple and is widely supported by many applications such as word processing applications, document readers, messaging apps, etc.
  4. SPEECH RECOGNITION INTERFACE • Speech Recognition interface is available via

    the browser’s window object and can be referenced in angular JS with the $window service. • Code snippet to instantiate speech recognition object:
  5. SPEECH RECOGNITION INTERFACE • The Start and Stop/Abort methods, allow

    us to control when the browser begins and stops to listen for the user’s speech. • Code snippet to implement the calls to start and stop speech recognition:
  6. SPEECH RECOGNITION INTERFACE • The results from the recognition are

    available via the result event and can be processed by implementing a handler to this event. • Code snippet for the result event handler that retrieves the final result and prints them to the browser’s console. • Results – collection of interim and final matching result • Result – list of alternatives including final transcript • Result.isFinal – indicates result is final • ResultIndex – indicates index of final result object • Result[index].Transcript – converted text • Result[index].confidence – confidence score
  7. SPEECH RECOGNITION SAMPLE OUTPUT • Speech to Text interim and

    final results for the phrase “web speech API”:
  8. SPEECH SYNTHESIS INTERFACE • As with the speech recognition interface,

    the speech synthesis interface is also available via the browser’s window object and can be referenced in angular JS with the $window service. • Another interface “SpeechSynthesisUtterance” should be used to pass the text or phrase to be spoken as well as to customize the voice, pitch, rate and volume. • Each browser provides a list of supported voices that can be retrieved to alter the voice and accent of the speech.
  9. SPEECH SYNTHESIS INTERFACE • The Speak, Pause, Resume and Cancel

    methods, allow us to interact with the speech synthesis object. The getVoices method retrieves the list of voices supported on the browser. • Speak will add a new item to the speech queue that will be processed by the browser. Cancel on the other hand stops speech immediately and clears the queue. • The SpeechSynthesisUtterance interface exposes several attributes to manipulate the speech such as text, lang, voice, pitch, rate and volume
  10. REFERENCES • Plural Sights has a course on this topic

    that helps us to build a demo application step by step. • Browser compatibility information is available at http://caniuse.com/#feat=speech-recognition and http://caniuse.com/#feat=speech-synthesis