Web Speech Hearing Aid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Web Speech Hearing Aid</title> | |
| <style> | |
| body, html { | |
| margin: 0; | |
| } | |
| html { | |
| height: 100%; | |
| } | |
| body { | |
| height: inherit; | |
| background-color: gray; | |
| } | |
| div.results { | |
| background-color: white; | |
| padding: 10px; | |
| margin: 10px; | |
| font-size: 32px; | |
| font-family: Sans-Serif; | |
| } | |
| .interim { | |
| color: #c53929; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="results"> | |
| <span class="interim" id="interim_span"> </span> | |
| </div> | |
| <div id="previous"> | |
| </div> | |
| <script> | |
| window.mobileAndTabletcheck = function() { | |
| var check = false; | |
| (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera); | |
| return check; | |
| }; | |
| // check for web speech | |
| if ('webkitSpeechRecognition' in window) { | |
| // recognition vars | |
| var recognizing = false; | |
| var recognition = new webkitSpeechRecognition(); | |
| // only continuous on desktop | |
| if(window.mobileAndTabletcheck()) recognition.continuous = false; | |
| else recognition.continuous = true; | |
| recognition.interimResults = true; | |
| recognition.maxAlternatives = 1; | |
| recognition.lang = 'en-US', 'United States'; | |
| // handle body click | |
| document.body.onclick = function() { | |
| if (recognizing) recognition.stop(); | |
| else recognition.start(); | |
| } | |
| // onstart, change state and background color | |
| recognition.onstart = function() { | |
| recognizing = true; | |
| document.body.style.backgroundColor = "#c53929"; | |
| }; | |
| // onerror, log (maybe restart?) | |
| recognition.onerror = function(event) { | |
| alert(event.error); | |
| recognizing = false; | |
| }; | |
| // onend, change state and background | |
| recognition.onend = function() { | |
| //console.log('onend'); | |
| // reset | |
| recognizing = false; | |
| document.body.style.backgroundColor = "gray"; | |
| interim_span.innerHTML = ' '; | |
| }; | |
| // onresult, append to interim transcript or push final to new div | |
| recognition.onresult = function(event) { | |
| // check for errors | |
| if (typeof(event.results) == 'undefined') { | |
| alert('undefined-event'); | |
| recognition.stop(); | |
| return; | |
| } | |
| // iterate through results | |
| var interim_transcript = ''; | |
| var final_transcript = ''; | |
| var is_final = false; | |
| for (var i = event.resultIndex; i < event.results.length; ++i) { | |
| //console.log(event.results[i]); | |
| // check for final results | |
| if (event.results[i].isFinal) { | |
| is_final = true; | |
| final_transcript += event.results[i][0].transcript; | |
| } | |
| // otherwise update interim span | |
| else { | |
| interim_transcript += event.results[i][0].transcript; | |
| } | |
| } | |
| if(is_final) { | |
| // create div | |
| var div = document.createElement('div'); | |
| div.innerHTML = final_transcript; | |
| div.setAttribute('class', 'results'); | |
| // append to beginning previous section | |
| fc = document.getElementById('previous').firstChild | |
| if(fc) document.getElementById('previous').insertBefore(div, fc); | |
| else document.getElementById('previous').appendChild(div); | |
| // reset interim | |
| interim_span.innerHTML = ' '; | |
| } | |
| else { | |
| // update interim span | |
| if(interim_transcript) interim_span.innerHTML = interim_transcript; | |
| else interim_span.innerHTML = ' '; | |
| } | |
| } | |
| } | |
| else { | |
| //console.log(window); | |
| interim_span.innerHTML = 'Web Speech API is not supported by this browser. Upgrade to <a href="//www.google.com/chrome">Chrome</a> version 25 or later.'; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment