API tools faq
paste
Advertisement
BrU32

JS Speech Recognition V3 SRC

BrU32
Oct 29th, 2016
148
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.22 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2. <center>
  3. <script>
  4. (function(e, p){
  5. var m = location.href.match(/platform=(win8|win|mac|linux|cros)/);
  6. e.id = (m && m[1]) ||
  7. (p.indexOf('Windows NT 6.2') > -1 ? 'win8' : p.indexOf('Windows') > -1 ? 'win' : p.indexOf('Mac') > -1 ? 'mac' : p.indexOf('CrOS') > -1 ? 'cros' : 'linux');
  8. e.className = e.className.replace(/\bno-js\b/,'js');
  9. })(document.documentElement, window.navigator.userAgent)
  10. </script>
  11. <meta charset="utf-8">
  12. <meta content="initial-scale=1, minimum-scale=1, width=device-width" name="viewport">
  13. <meta content=
  14. "Google Chrome is a browser that combines a minimal design with sophisticated technology to make the web faster, safer, and easier."
  15. name="description">
  16. <title>
  17. Chrome Browser
  18. </title>
  19. <link href="https://plus.google.com/100585555255542998765" rel="publisher">
  20. <link href="//www.google.com/images/icons/product/chrome-32.png" rel="icon" type="image/ico">
  21. <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin" rel=
  22. "stylesheet">
  23. <link href="/intl/en/chrome/assets/common/css/chrome.min.css" rel="stylesheet">
  24. <script src="//www.google.com/js/gweb/analytics/autotrack.js">
  25. </script>
  26. <script>
  27. new gweb.analytics.AutoTrack({
  28. profile: 'UA-26908291-1'
  29. });
  30. </script>
  31. <style>
  32. #info {
  33. font-size: 20px;
  34. }
  35. #div_start {
  36. float: right;
  37. }
  38. #headline {
  39. text-decoration: none
  40. }
  41. #results {
  42. font-size: 14px;
  43. font-weight: bold;
  44. border: 1px solid #ddd;
  45. padding: 15px;
  46. text-align: left;
  47. min-height: 150px;
  48. }
  49. #start_button {
  50. border: 0;
  51. background-color:transparent;
  52. padding: 0;
  53. }
  54. .interim {
  55. color: gray;
  56. }
  57. .final {
  58. color: black;
  59. padding-right: 3px;
  60. }
  61. .button {
  62. display: none;
  63. }
  64. .marquee {
  65. margin: 20px auto;
  66. }
  67.  
  68. #buttons {
  69. margin: 10px 0;
  70. position: relative;
  71. top: -50px;
  72. }
  73.  
  74. #copy {
  75. margin-top: 20px;
  76. }
  77.  
  78. #copy > div {
  79. display: none;
  80. margin: 0 70px;
  81. }
  82. </style>
  83. <style>
  84. a.c1 {font-weight: normal;}
  85. </style>
  86. </head>
  87. <body class="" id="grid">
  88. <div class="browser-landing" id="main">
  89. <div class="compact marquee-stacked" id="marquee">
  90. <div class="marquee-copy">
  91. <h1>
  92. <a class="c1" href="http://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html">Web
  93. Speech API</a> Demonstration
  94. </h1>
  95. </div>
  96. </div>
  97. <div class="compact marquee">
  98. <div id="info">
  99. <p id="info_start">
  100. Click on the microphone icon and begin speaking for as long as you like.
  101. </p>
  102. <p id="info_speak_now" style="display:yes">
  103. Speak now.
  104. </p>
  105. <p id="info_no_speech" style="display:none">
  106. No speech was detected. You may need to adjust your <a href=
  107. "//support.google.com/chrome/bin/answer.py?hl=en&amp;answer=1407892">microphone
  108. settings</a>.
  109. </p>
  110. <p id="info_no_microphone" style="display:none">
  111. No microphone was found. Ensure that a microphone is installed and that
  112. <a href="//support.google.com/chrome/bin/answer.py?hl=en&amp;answer=1407892">
  113. microphone settings</a> are configured correctly.
  114. </p>
  115. <p id="info_allow" style="display:none">
  116. Click the "Allow" button above to enable your microphone.
  117. </p>
  118. <p id="info_denied" style="display:none">
  119. Permission to use microphone was denied.
  120. </p>
  121. <p id="info_blocked" style="display:none">
  122. Permission to use microphone is blocked. To change, go to
  123. chrome://settings/contentExceptions#media-stream
  124. </p>
  125. <p id="info_upgrade" style="display:none">
  126. Web Speech API is not supported by this browser. Upgrade to <a href=
  127. "//www.google.com/chrome">Chrome</a> version 25 or later.
  128. </p>
  129. </div>
  130. <div id="div_start">
  131. <button id="start_button" onclick="startButton(event)"><img alt="Start" id="start_img"
  132. src="/intl/en/chrome/assets/common/images/content/mic.gif"></button>
  133. </div>
  134. <div id="results">
  135. <span class="final" id="final_span"></span> <span class="interim" id=
  136. "interim_span"></span>
  137. </div>
  138. <div id="copy">
  139. <button class="button" id="copy_button" onclick="copyButton()">Copy and Paste</button>
  140. <div id="copy_info">
  141. <p>
  142. Press Control-C to copy text.
  143. </p>
  144.  
  145. </div><button class="button" id="email_button" onclick="emailButton()">Create
  146. Email</button>
  147. <div id="email_info">
  148. <p>
  149. Text sent to default email application.
  150. </p>
  151. <p>
  152. (See chrome://settings/handlers to change.)
  153. </p>
  154. </div>
  155. </div>
  156. <div class="compact marquee" id="div_language">
  157. <select id="select_language" onchange="updateCountry()">
  158. </select>&nbsp;&nbsp; <select id="select_dialect">
  159. </select>
  160. </div>
  161. </div>
  162. </div><script src="/intl/en/chrome/assets/common/js/chrome.min.js">
  163. </script> <script>
  164. var chrmMenuBar = new chrm.ui.MenuBar();
  165. chrmMenuBar.decorate('nav');
  166. var chrmLogo = new chrom.ui.Logo('logo');
  167.  
  168. var chrmscroll = new chrm.ui.SmoothScroll('scroll');
  169. chrmscroll.init();
  170.  
  171.  
  172.  
  173. window.___gcfg = { lang: 'en' };
  174. (function() {
  175. var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  176. po.src = 'https://apis.google.com/js/plusone.js';
  177. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  178. })();
  179.  
  180.  
  181.  
  182.  
  183.  
  184. </script> <script>
  185. var langs =
  186. [['Afrikaans', ['af-ZA']],
  187. ['Bahasa Indonesia',['id-ID']],
  188. ['Bahasa Melayu', ['ms-MY']],
  189. ['Català', ['ca-ES']],
  190. ['Čeština', ['cs-CZ']],
  191. ['Dansk', ['da-DK']],
  192. ['Deutsch', ['de-DE']],
  193. ['English', ['en-AU', 'Australia'],
  194. ['en-CA', 'Canada'],
  195. ['en-IN', 'India'],
  196. ['en-NZ', 'New Zealand'],
  197. ['en-ZA', 'South Africa'],
  198. ['en-GB', 'United Kingdom'],
  199. ['en-US', 'United States']],
  200. ['Español', ['es-AR', 'Argentina'],
  201. ['es-BO', 'Bolivia'],
  202. ['es-CL', 'Chile'],
  203. ['es-CO', 'Colombia'],
  204. ['es-CR', 'Costa Rica'],
  205. ['es-EC', 'Ecuador'],
  206. ['es-SV', 'El Salvador'],
  207. ['es-ES', 'España'],
  208. ['es-US', 'Estados Unidos'],
  209. ['es-GT', 'Guatemala'],
  210. ['es-HN', 'Honduras'],
  211. ['es-MX', 'México'],
  212. ['es-NI', 'Nicaragua'],
  213. ['es-PA', 'Panamá'],
  214. ['es-PY', 'Paraguay'],
  215. ['es-PE', 'Perú'],
  216. ['es-PR', 'Puerto Rico'],
  217. ['es-DO', 'República Dominicana'],
  218. ['es-UY', 'Uruguay'],
  219. ['es-VE', 'Venezuela']],
  220. ['Euskara', ['eu-ES']],
  221. ['Filipino', ['fil-PH']],
  222. ['Français', ['fr-FR']],
  223. ['Galego', ['gl-ES']],
  224. ['Hrvatski', ['hr_HR']],
  225. ['IsiZulu', ['zu-ZA']],
  226. ['Íslenska', ['is-IS']],
  227. ['Italiano', ['it-IT', 'Italia'],
  228. ['it-CH', 'Svizzera']],
  229. ['Lietuvių', ['lt-LT']],
  230. ['Magyar', ['hu-HU']],
  231. ['Nederlands', ['nl-NL']],
  232. ['Norsk bokmål', ['nb-NO']],
  233. ['Polski', ['pl-PL']],
  234. ['Português', ['pt-BR', 'Brasil'],
  235. ['pt-PT', 'Portugal']],
  236. ['Română', ['ro-RO']],
  237. ['Slovenščina', ['sl-SI']],
  238. ['Slovenčina', ['sk-SK']],
  239. ['Suomi', ['fi-FI']],
  240. ['Svenska', ['sv-SE']],
  241. ['Tiếng Việt', ['vi-VN']],
  242. ['Türkçe', ['tr-TR']],
  243. ['Ελληνικά', ['el-GR']],
  244. ['български', ['bg-BG']],
  245. ['Pусский', ['ru-RU']],
  246. ['Српски', ['sr-RS']],
  247. ['Українська', ['uk-UA']],
  248. ['한국어', ['ko-KR']],
  249. ['中文', ['cmn-Hans-CN', '普通话 (中国大陆)'],
  250. ['cmn-Hans-HK', '普通话 (香港)'],
  251. ['cmn-Hant-TW', '中文 (台灣)'],
  252. ['yue-Hant-HK', '粵語 (香港)']],
  253. ['日本語', ['ja-JP']],
  254. ['हिन्दी', ['hi-IN']],
  255. ['ภาษาไทย', ['th-TH']]];
  256.  
  257. for (var i = 0; i < langs.length; i++) {
  258. select_language.options[i] = new Option(langs[i][0], i);
  259. }
  260. select_language.selectedIndex = 7;
  261. updateCountry();
  262. select_dialect.selectedIndex = 6;
  263. showInfo('info_start');
  264.  
  265. function updateCountry() {
  266. for (var i = select_dialect.options.length - 1; i >= 0; i--) {
  267. select_dialect.remove(i);
  268. }
  269. var list = langs[select_language.selectedIndex];
  270. for (var i = 1; i < list.length; i++) {
  271. select_dialect.options.add(new Option(list[i][1], list[i][0]));
  272. }
  273. select_dialect.style.visibility = list[1].length == 1 ? 'hidden' : 'visible';
  274. }
  275.  
  276. var create_email = false;
  277. var final_transcript = '';
  278. var recognizing = false;
  279. var ignore_onend;
  280. var start_timestamp;
  281. if (!('webkitSpeechRecognition' in window)) {
  282. upgrade();
  283. } else {
  284. start_button.style.display = 'visible';
  285. var recognition = new webkitSpeechRecognition();
  286. recognition.continuous = true;
  287. recognition.interimResults = true;
  288.  
  289. recognition.onstart = function() {
  290. recognizing = true;
  291. showInfo('info_speak_now');
  292. start_img.src = '/intl/en/chrome/assets/common/images/content/mic-animate.gif';
  293. };
  294.  
  295. recognition.onerror = function(event) {
  296. if (event.error == 'no-speech') {
  297. start_img.src = '/intl/en/chrome/assets/common/images/content/mic.gif';
  298. showInfo('info_no_speech');
  299. ignore_onend = true;
  300. }
  301. if (event.error == 'audio-capture') {
  302. start_img.src = '/intl/en/chrome/assets/common/images/content/mic.gif';
  303. showInfo('info_no_microphone');
  304. ignore_onend = true;
  305. }
  306. if (event.error == 'not-allowed') {
  307. if (event.timeStamp - start_timestamp < 100) {
  308. showInfo('info_blocked');
  309. } else {
  310. showInfo('info_denied');
  311. }
  312. ignore_onend = true;
  313. }
  314. };
  315.  
  316. recognition.onend = function() {
  317. recognizing = false;
  318. if (ignore_onend) {
  319. return;
  320. }
  321. start_img.src = '/intl/en/chrome/assets/common/images/content/mic.gif';
  322. if (!final_transcript) {
  323. showInfo('info_start');
  324. return;
  325. }
  326. showInfo('');
  327. if (window.getSelection) {
  328. window.getSelection().removeAllRanges();
  329. var range = document.createRange();
  330. range.selectNode(document.getElementById('final_span'));
  331. window.getSelection().addRange(range);
  332. }
  333. if (create_email) {
  334. create_email = false;
  335. createEmail();
  336. }
  337. };
  338.  
  339. recognition.onresult = function(event) {
  340. var interim_transcript = '';
  341. if (typeof(event.results) == 'undefined') {
  342. recognition.onend = null;
  343. recognition.stop();
  344. upgrade();
  345. return;
  346. }
  347. for (var i = event.resultIndex; i < event.results.length; ++i) {
  348. if (event.results[i].isFinal) {
  349. final_transcript += event.results[i][0].transcript;
  350. } else {
  351. interim_transcript += event.results[i][0].transcript;
  352. }
  353. }
  354. final_transcript = capitalize(final_transcript);
  355. final_span.innerHTML = linebreak(final_transcript);
  356. interim_span.innerHTML = linebreak(interim_transcript);
  357. if (final_transcript || interim_transcript) {
  358. showButtons('inline');
  359. }
  360. };
  361. }
  362.  
  363. function upgrade() {
  364. start_button.style.visibility = 'enabled';
  365.  
  366. }
  367.  
  368. var two_line = /\n\n/g;
  369. var one_line = /\n/g;
  370. function linebreak(s) {
  371. return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
  372. }
  373.  
  374. var first_char = /\S/;
  375. function capitalize(s) {
  376. return s.replace(first_char, function(m) { return m.toUpperCase(); });
  377. }
  378.  
  379. function createEmail() {
  380. var n = final_transcript.indexOf('\n');
  381. if (n < 0 || n >= 80) {
  382. n = 40 + final_transcript.substring(40).indexOf(' ');
  383. }
  384. var subject = encodeURI(final_transcript.substring(0, n));
  385. var body = encodeURI(final_transcript.substring(n + 1));
  386. window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
  387. }
  388.  
  389. function copyButton() {
  390. if (recognizing) {
  391. recognizing = false;
  392. recognition.stop();
  393. }
  394. copy_button.style.display = 'none';
  395. copy_info.style.display = 'inline-block';
  396. showInfo('');
  397. }
  398.  
  399. function emailButton() {
  400. if (recognizing) {
  401. create_email = true;
  402. recognizing = false;
  403. recognition.stop();
  404. } else {
  405. createEmail();
  406. }
  407. email_button.style.display = 'none';
  408. email_info.style.display = 'inline-block';
  409. showInfo('');
  410. }
  411.  
  412. function startButton(event) {
  413. if (recognizing) {
  414. recognition.stop();
  415. return;
  416. }
  417. final_transcript = '';
  418. recognition.lang = select_dialect.value;
  419. recognition.start();
  420. ignore_onend = false;
  421. final_span.innerHTML = '';
  422. interim_span.innerHTML = '';
  423. start_img.src = '/intl/en/chrome/assets/common/images/content/mic-slash.gif';
  424. showInfo('info_allow');
  425. showButtons('none');
  426. start_timestamp = event.timeStamp;
  427. }
  428.  
  429. function showInfo(s) {
  430. if (s) {
  431. for (var child = info.firstChild; child; child = child.nextSibling) {
  432. if (child.style) {
  433. child.style.display = child.id == s ? 'inline' : 'none';
  434. }
  435. }
  436. info.style.visibility = 'visible';
  437. } else {
  438. info.style.visibility = 'hidden';
  439. }
  440. }
  441.  
  442. var current_style;
  443. function showButtons(style) {
  444. if (style == current_style) {
  445. return;
  446. }
  447. current_style = style;
  448. copy_button.style.display = style;
  449. email_button.style.display = style;
  450. copy_info.style.display = 'none';
  451. email_info.style.display = 'none';
  452. }
  453. </script>
  454. </body>
  455. </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!