API tools faq
paste
Advertisement
Guest User

jotFormWebSpeechAPIWidget

a guest
Sep 30th, 2014
257
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.91 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.      Author: Conal Mullan
  5.      Created Date: 30-Sept-2014
  6.      Description: HTML5 Speech Recogntion API as input for a JotForm form field
  7.      API Docs: https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html
  8.      Notes(30-sept-14): This API is only supported in Chrome at this point.
  9.      
  10.      Modification History:
  11.  
  12.      -->
  13.  
  14. <html>
  15.     <head>
  16.         <script src="http://js.jotform.com/JotFormCustomWidget.min.js"></script>
  17.         <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
  18.         <style>
  19.             #start_button {
  20.                 font-size: 14pt;
  21.             }
  22.             #transcript {
  23.                 color: darkred;
  24.                 font-size: 14pt;
  25.                 border: 3px solid #cccccc;
  26.                 padding: 2px;              
  27.                 background-color:#F8E0EC;              
  28.             }
  29.             #instructions {
  30.                 color: darkblue;
  31.                 font-size: 12pt;
  32.             }
  33.             .supported {
  34.                 background-color:#BCF5A9 !important;
  35.             }          
  36.         </style>
  37.     </head>
  38. <body> 
  39.     <span id="labelText"></span>
  40.     <textarea rows="8" cols="50" id="transcript">&nbsp;</textarea>
  41.     <br>
  42.         <div id="instructions">&nbsp;</div>
  43.         <div id="controls" style="display:none;">
  44.             <!-- Language selection -->
  45.             <select id="select_language" onchange="updateCountry()">
  46.                 <option value="0">Afrikaans</option><option value="1">Bahasa Indonesia</option><option value="2">Bahasa Melayu</option><option value="3">Català</option><option value="4">Ceština</option><option value="5">Deutsch</option><option value="6">English</option><option value="7">Español</option><option value="8">Euskara</option><option value="9">Français</option><option value="10">Galego</option><option value="11">Hrvatski</option><option value="12">IsiZulu</option><option value="13">Íslenska</option><option value="14">Italiano</option><option value="15">Magyar</option><option value="16">Nederlands</option><option value="17">Norsk bokmål</option><option value="18">Polski</option><option value="19">Português</option><option value="20">Româna</option><option value="21">Slovencina</option><option value="22">Suomi</option><option value="23">Svenska</option><option value="24">Türkçe</option>
  47.             </select>
  48.             <!-- dialect selection -->
  49.             <select id="select_dialect" style="visibility: visible;">
  50.                 <option value="en-AU">Australia</option><option value="en-CA">Canada</option><option value="en-IN">India</option><option value="en-NZ">New Zealand</option><option value="en-ZA">South Africa</option><option value="en-GB">United Kingdom</option><option value="en-US">United States</option>
  51.             </select>
  52.             <button disabled="disabled" id="start_button">Click to start voice dictation</button>
  53.         </div>
  54.  
  55.  <!-- VOICE RECOGNITION VIA WEB SPEECH API https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html -->
  56.  
  57.     <script type="text/javascript">
  58.     var finalTranscript = '';
  59.     var recognizing = false;
  60.  
  61.     $(document).ready(function() {
  62.  
  63.         // check that your browser supports the API
  64.         if (!('webkitSpeechRecognition' in window)) {            
  65.             // Not Supported
  66.             $('#instructions').html('Voice recognization not supported in your browser! - please suppy input via keyboard');
  67.             //$('#start_button').html('Voice recognisation support disabled');
  68.            
  69.         } else {
  70.             // We have a supported browser
  71.             // Create the recognition object and event handlers
  72.             $('#transcript').addClass('supported');
  73.             $('#start_button').removeAttr('disabled');
  74.             $('#controls').show();            
  75.             $('#instructions').html('Voice recognization enabled!');
  76.             var recognition = new webkitSpeechRecognition();
  77.             recognition.continuous = true;         // keep processing input until stopped
  78.             recognition.interimResults = true;     // show interim results
  79.             // grab the language/dialect from our input fields.
  80.             recognition.lang = select_dialect.value;
  81.            
  82.             recognition.onstart = function() {
  83.                 recognizing = true;
  84.                 $('#instructions').html(' Please speak slowly and clearly');
  85.                 $('#start_button').html('Click to finish recording');
  86.             };
  87.  
  88.             recognition.onerror = function(event) {
  89.                 console.log("There was a recognition error...");
  90.             };
  91.  
  92.             recognition.onend = function() {
  93.                 recognizing = false;
  94.                 $('#instructions').html('&nbsp;');
  95.             };
  96.  
  97.             recognition.onresult = function(event) {
  98.                 var interimTranscript = '';
  99.  
  100.                 // Assemble the transcript from the array of results
  101.                 for (var i = event.resultIndex; i < event.results.length; ++i) {
  102.                    if (event.results[i].isFinal) {
  103.                        finalTranscript += event.results[i][0].transcript;
  104.                    } else {
  105.                        interimTranscript += event.results[i][0].transcript;
  106.                    }
  107.                }
  108.                console.log("interim:  " + interimTranscript);
  109.                console.log("final:    " + finalTranscript);
  110.  
  111.                // update the page
  112.                if(finalTranscript.length > 0) {
  113.                     $('#transcript').val(finalTranscript);
  114.                     recognition.stop();
  115.                     $('#start_button').html('Click to Start Again');
  116.                     recognizing = false;
  117.                 }
  118.             };
  119.  
  120.             $("#start_button").click(function(e) {
  121.                 e.preventDefault();
  122.  
  123.                 if (recognizing) {
  124.                     recognition.stop();
  125.                     $('#start_button').html('Click to Start Again');
  126.                     recognizing = false;
  127.                 } else {
  128.                     finalTranscript = '';
  129.                     // Request access to the User's microphone and Start recognizing voice input
  130.                     recognition.start();
  131.                     $('#start_button').html('Waiting');
  132.                     $('#instructions').html('Allow the browser to use your Microphone');                    
  133.                     $('#transcript').val('');
  134.                 }
  135.             });
  136.         }
  137.     });
  138.     <!-- languages & dialect selection -->
  139.     var langs =
  140. [['Afrikaans',       ['af-ZA']],
  141.  ['Bahasa Indonesia',['id-ID']],
  142.  ['Bahasa Melayu',   ['ms-MY']],
  143.  ['Català',          ['ca-ES']],
  144.  ['Ceština',         ['cs-CZ']],
  145.  ['Deutsch',         ['de-DE']],
  146.  ['English',         ['en-AU', 'Australia'],
  147.                      ['en-CA', 'Canada'],
  148.                      ['en-IN', 'India'],
  149.                      ['en-NZ', 'New Zealand'],
  150.                      ['en-ZA', 'South Africa'],
  151.                      ['en-GB', 'United Kingdom'],
  152.                      ['en-US', 'United States']],
  153.  ['Español',         ['es-AR', 'Argentina'],
  154.                      ['es-BO', 'Bolivia'],
  155.                      ['es-CL', 'Chile'],
  156.                      ['es-CO', 'Colombia'],
  157.                      ['es-CR', 'Costa Rica'],
  158.                      ['es-EC', 'Ecuador'],
  159.                      ['es-SV', 'El Salvador'],
  160.                      ['es-ES', 'España'],
  161.                      ['es-US', 'Estados Unidos'],
  162.                      ['es-GT', 'Guatemala'],
  163.                      ['es-HN', 'Honduras'],
  164.                      ['es-MX', 'México'],
  165.                      ['es-NI', 'Nicaragua'],
  166.                      ['es-PA', 'Panamá'],
  167.                      ['es-PY', 'Paraguay'],
  168.                      ['es-PE', 'Perú'],
  169.                      ['es-PR', 'Puerto Rico'],
  170.                      ['es-DO', 'República Dominicana'],
  171.                      ['es-UY', 'Uruguay'],
  172.                      ['es-VE', 'Venezuela']],
  173.  ['Euskara',         ['eu-ES']],
  174.  ['Français',        ['fr-FR']],
  175.  ['Galego',          ['gl-ES']],
  176.  ['Hrvatski',        ['hr_HR']],
  177.  ['IsiZulu',         ['zu-ZA']],
  178.  ['Íslenska',        ['is-IS']],
  179.  ['Italiano',        ['it-IT', 'Italia'],
  180.                      ['it-CH', 'Svizzera']],
  181.  ['Magyar',          ['hu-HU']],
  182.  ['Nederlands',      ['nl-NL']],
  183.  ['Norsk bokmål',    ['nb-NO']],
  184.  ['Polski',          ['pl-PL']],
  185.  ['Português',       ['pt-BR', 'Brasil'],
  186.                      ['pt-PT', 'Portugal']],
  187.  ['Româna',          ['ro-RO']],
  188.  ['Slovencina',      ['sk-SK']],
  189.  ['Suomi',           ['fi-FI']],
  190.  ['Svenska',         ['sv-SE']],
  191.  ['Türkçe',          ['tr-TR']],
  192.  ['Lingua latina',   ['la']]];
  193.  
  194. for (var i = 0; i < langs.length; i++) {
  195.  select_language.options[i] = new Option(langs[i][0], i);
  196. }
  197. // lets default to U.S English
  198. select_language.selectedIndex = 6; // English
  199. updateCountry();
  200. select_dialect.selectedIndex = 6; // United States
  201.  
  202.  
  203. function updateCountry() {
  204.  for (var i = select_dialect.options.length - 1; i >= 0; i--) {
  205.     select_dialect.remove(i);
  206.   }
  207.   var list = langs[select_language.selectedIndex];
  208.   for (var i = 1; i < list.length; i++) {
  209.    select_dialect.options.add(new Option(list[i][1], list[i][0]));
  210.  }
  211.  select_dialect.style.visibility = list[1].length == 1 ? 'hidden' : 'visible';
  212. }
  213.    
  214.     </script>
  215.  
  216. <!-- JOTFORM WIDGET INTEGRATION - http://developers.jotform.com/widgets  -->
  217.  
  218.     <script type="text/javascript">
  219.            var label = JFCustomWidget.getQueryString('testing');
  220.            document.getElementById('labelText').innerHTML = label;            
  221.             JFCustomWidget.subscribe("ready", function(){
  222.                 //subscribe to form submit event
  223.                 JFCustomWidget.subscribe("submit", function(){
  224.                     // Check field for content then pass to JotForm                
  225.                     if ($("#transcript").val().length == 1)
  226.                     {
  227.                         // doesnt look like their is anything in the field.
  228.                         $('#instructions').html('The field is empty. Please supply some input!');
  229.                         // unable to prevent the form submitting on invalid data
  230.                         // needs a little work here
  231.                         return;                    
  232.                     }
  233.                     else
  234.                     {
  235.                         var msg = {                        
  236.                             valid: true,
  237.                             value: $("#transcript").val()
  238.                         }
  239.                         // send to JotForm
  240.                         JFCustomWidget.sendSubmit(msg);
  241.                     }
  242.                 });
  243.             });
  244.     </script>      
  245.     </body>
  246. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!