webSpeech

Web Speech API allows Chrome users the ability to speak into a microphone and see the transcribed text of what they are saying on screen. This is also known as speech to text.

webSpeech is a jQuery plugin that utilizes Google Chrome's Web Speech API. It allows programmers a simple way to declare a field, whether it be a textarea, form input, or div element, and then use Chrome's Web Speech API to transcribe what is spoken into the mic into that declared field.

Below are the basic settings used for the webSpeech (speech to text) jQuery plugin:

  • button - the id of the initiating button
  • lang - the language to be transcribed (see supported languages below)
  • format - the format of the destination (input field, textarea, or html (such as a div element)
  • build - this will either append to the current text in the parent object or overwrite it
  • startImg - the default starting image
  • animateImg - image shown while active
  • errorImg - image shown if error occured
  • showHelp - shows the "help" text above the parent object
  • showInterim - shows the "interim" text below the parent object (the text that is currently being transcribed)

Default

  jQuery('#object').webSpeech({ 
      button      : 'webSpeech_button', //id of the initiating button
      lang        : 'en-US',
      format      : 'input',            //input, textarea, html
      build       : 'append',           //append, overwrite
      startImg    : 'mic.gif',
      animateImg  : 'mic-animate.gif',
      errorImg    : 'mic-slash.gif',
      showHelp    : true,
      showInterim : true
   });

 

Supported Web Speech API Languages

Afrikaans = af-ZA
Bahasa Indonesia = id-ID
Bahasa Melayu = ms-MY
Català = ca-ES
Čeština = cs-CZ
Deutsch = de-DE
English (Australia) = en-AU
English (Canada) = en-CA
English (India) = en-IN
English (New Zealand) = en-NZ
English (South Africa) = en-ZA
English (United Kingdom) = en-UK
English (United States) = en-US
Español (Argentina) = es-AR
Español (Bolivia) = es-BO
Español (Chile) = es-CL
Español (Colombia) = es-CO
Español (Costa Rica) = es-CR
Español (Ecuador) = es-EC
Español (El Salvador) = es-SV
Español (España) = es-ES
Español (Estados Unidos) = es-US
Español (Guatemala) = es-GT
Español (Honduras) = es-HN
Español (México) = es-MX
Español (Nicaragua) = es-NI
Español (Panamá) = es-PA
Español (Paraguay) = es-PY
Español (Perú) = es-PE
Español (Puerto Rico) = es-PR
Español (República Dominicana) = es-DO
Español (Uruguay) = es-UY
Español (Venezuela) = es-VE
Euskara = eu-ES
Français = fr-FR
Galego = gl-ES
Hrvatski = hr_HR
IsiZulu = zu-ZA
Íslenska = is-IS
Italiano (Italia) = it-IT
Italiano (Svizzera) = it-CH
Magyar = hu-HU
Nederlands = nl-NL
Norsk bokmål = nb-NO
Polski = pl-PL
Português (Brasil) = pt-BR
Português (Portugal) = pt-PT
Română = ro-RO
Slovenčina = sk-SK
Suomi = fi-FI
Svenska = sv-SE
Türkçe = tr-TR
български = bg-BG
Pусский = ru-RU
Српски = sr-RS
한국어 = ko-KR
中文 (普通话 (中国大陆)) = cmn-Hans-CN
中文 (普通话 (香港)) = cmn-Hans-HK
中文 (中文 (台灣)) = cmn-Hant-TW
中文 (粵語 (香港)) = yue-Hant-HK
日本語 = ja-JP
Lingua latīna = la

 

Examples

Textarea

Format set for textarea.


 

Text Input

Different images, overwrites, no helper text, no interim text.


 

Div

Format set for HTML.

 

If you have questions about anything on this site, you can find me on Google+: