├── .gitignore ├── README.md ├── jquery.speechtotext.min.js ├── example.html └── jquery.speechtotext.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Speech to Text jQuery Plugin Example 2 | 3 | ## Usage 4 | 5 | General usage is to select the input and/or textarea fields that you would like to enable speech to text on. 6 | 7 | ```javascript 8 | $("input, textarea").speechToText(); 9 | ``` 10 | 11 | 12 | ### Options 13 | 14 | #### inputResetClass 15 | You may specify a class to reset any custom CSS you have applied to input fields. This is used as a dummy input has to be created to enable speech to text on textareas. 16 | 17 | 18 | ## Note 19 | This plugin uses the HTML5 `speech` attribute which is currently only implemented by webkit (Chrome, Safari, iOS, Android, etc) and only natively on `` elements. 20 | 21 | This plugin was primarily designed to bring this functionality to the ` 50 | 51 | 52 |
53 |   54 |
55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /jquery.speechtotext.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Thanks: 4 | * 5 | * Stoyan Stefanov 6 | * teedyay 7 | **/ 8 | 9 | (function($) { 10 | $.speechToText = function(el, options) { 11 | // To avoid scope issues, use 'base' instead of 'this' 12 | // to reference this class from internal events and functions. 13 | var base = this; 14 | 15 | // Access to jQuery and DOM versions of element 16 | base.$el = $(el); 17 | base.el = el; 18 | 19 | // Add a reverse reference to the DOM object 20 | base.$el.data("speechToText", base); 21 | 22 | base.init = function() { 23 | base.options = $.extend({},$.speechToText.defaultOptions, options); 24 | 25 | // Standard speech input reset 26 | $("").appendTo("head"); 27 | }; 28 | 29 | // Run initializer 30 | base.init(); 31 | }; 32 | 33 | $.speechToText.defaultOptions = { 34 | inputResetClass: null 35 | }; 36 | 37 | $.fn.speechToText = function(options) { 38 | var base = (new $.speechToText(this, options)); 39 | 40 | return this.each(function(i, e) { 41 | var $e = $(e); 42 | 43 | // Check if we are dealing with a textarea 44 | if (e.tagName == "TEXTAREA") { 45 | // Append pseudo speech element 46 | $e.after( 47 | $("") 48 | .attr("type", "text") 49 | .attr("x-webkit-speech", "x-webkit-speech") 50 | .addClass("speechToText-input-reset") 51 | .addClass(base.options.inputResetClass) 52 | .bind("webkitspeechchange", function() { 53 | // Capture input length for refocus 54 | var len = $(this).val().length * 2; // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh. 55 | 56 | // Move value over to textarea 57 | e.value = this.value; 58 | // Clear value from input 59 | this.value = ""; 60 | 61 | // Move focue over to the textarea for consistency 62 | e.focus(); 63 | // If this function exists... 64 | if (e.setSelectionRange) { 65 | // ... then use it 66 | // (Doesn't work in IE) 67 | e.setSelectionRange(len, len); 68 | } else { 69 | // ... otherwise replace the contents with itself 70 | // (Doesn't work in Google Chrome) 71 | $e.val($e.val()); 72 | } 73 | 74 | // Scroll to the bottom, in case we're in a tall textarea 75 | // (Necessary for Firefox and Google Chrome) 76 | e.scrollTop = 999999; 77 | }) 78 | ); 79 | } else { 80 | // Apply speech attribute 81 | $e.attr("x-webkit-speech", "x-webkit-speech"); 82 | } 83 | }); 84 | }; 85 | 86 | })(jQuery); --------------------------------------------------------------------------------