| <!DOCTYPE html> |
| <html class="no-js consumer" lang="th"> |
|
|
| <head> |
| <meta charset="utf-8"> |
| <meta content="initial-scale=1, minimum-scale=1, width=device-width" name="viewport"> |
| <meta content="Google Chrome is a browser that combines a minimal design with sophisticated technology to make the web faster, safer, and easier." |
| name="description"> |
| <title> |
| demo apps |
| </title> |
| <link href="http://www.google.com/images/icons/product/chrome-32.png" rel="icon" type="image/ico"> |
| <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin" rel="stylesheet"> |
| <link href="http://www.google.com/intl/en/chrome/assets/common/css/chrome.min.css" rel="stylesheet"> |
| <h4 style="overscroll-behavior-block;:"><a href="../index.html">HOME</a></h4> |
| <style> |
| #info { |
| font-size: 20px; |
| } |
| |
| #div_start { |
| float: right; |
| } |
| |
| #headline { |
| text-decoration: none |
| } |
| |
| #results { |
| font-size: 14px; |
| font-weight: bold; |
| border: 1px solid #ddd; |
| padding: 15px; |
| text-align: left; |
| min-height: 150px; |
| background-color: rgb(250, 250, 73); |
| } |
| |
| h1, .h1 { |
| color: #000; |
| font-size: 3.2em; |
| font-weight: 21; |
| line-height: 1.15; |
| margin: 0 0 0.7em; |
| background-color: rgb(252, 252, 248); width: -20px; |
| } |
| |
| #start_button { |
| border: 0; |
| background-color: transparent; |
| padding: 0; |
| } |
| |
| .interim { |
| color: gray; |
| } |
| |
| .final { |
| color: black; |
| padding-right: 3px; |
| } |
| |
| .button { |
| display: none; |
| } |
| |
| .marquee { |
| margin: 20px auto; |
| } |
| |
| #buttons { |
| margin: 10px 0; |
| position: relative; |
| top: -50px; |
| } |
| |
| #copy { |
| margin-top: 20px; |
| } |
| |
| #copy>div { |
| display: none; |
| margin: 0 70px; |
| } |
| |
| a.c1 { |
| font-weight: normal; |
| } |
| |
| body{ |
| background-image: url(backspeech.png) ; height: 500; width: -; |
| background-position: center; |
| font-style: italic; |
| } |
| |
| </style> |
| </head> |
|
|
| <link rel="stylesheet" href="style.css"> |
| <body class="" id="grid"> |
| <div class="browser-landing" id="main"> |
| <div class="compact marquee-stacked" id="marquee"> |
| <div class="marquee-copy"> |
| <h1> |
| <a class="c1" href="https://www.instagram.com/ansellmaputri/?hl=id"> |
| PROLOVE</a> |
| </h1> |
| </div> |
| </div> |
| <div class="compact marquee"> |
| <div id="info"> |
| |
| <p id="info_start"> |
| Click on the microphone icon and begin speaking for as long as you like. |
| </p> |
| <p></p> |
| <p id="info_speak_now" style="display:none"> |
| Speak now. |
| </p> |
| <p id="info_no_speech" style="display:none"> |
| No speech was detected. You may need to adjust your <a href="//support.google.com/chrome/bin/answer.py?hl=en&answer=1407892">microphone |
| settings</a>. |
| </p> |
| <p id="info_no_microphone" style="display:none"> |
| No microphone was found. Ensure that a microphone is installed and that |
| <a href="//support.google.com/chrome/bin/answer.py?hl=en&answer=1407892"> |
| microphone settings</a> are configured correctly. |
| </p> |
| <p id="info_allow" style="display:none"> |
| Click the "Allow" button above to enable your microphone. |
| </p> |
| <p id="info_denied" style="display:none"> |
| Permission to use microphone was denied. |
| </p> |
| <p id="info_blocked" style="display:none"> |
| Permission to use microphone is blocked. To change, go to chrome://settings/contentExceptions#media-stream |
| </p> |
| <p id="info_upgrade" style="display:none"> |
| Web Speech API is not supported by this browser. Upgrade to <a href="//www.google.com/chrome">Chrome</a> version |
| 25 or later. |
| </p> |
| </div> |
| |
| <div id="div_start"> |
| <button id="start_button" onclick="startButton(event)"><img alt="Start" id="start_img" |
| src="5346039.png"></button> |
| </div> |
| <div id="results"> |
| <span class="final" id="final_span"></span> <span class="interim" id="interim_span"></span> |
| </div> |
| <div id="copy"> |
| <button class="button" id="copy_button" onclick="copyButton()">Copy and Paste</button> |
| <div id="copy_info"> |
| <p> |
| Press Control-C to copy text. |
| </p> |
| <p> |
| (Command-C on Mac.) |
| </p> |
| </div><button class="button" id="email_button" onclick="emailButton()">save</button> |
| <div id="email_info"> |
| <p> |
| Text sent to default email application. |
| </p> |
| <p> |
| (See chrome://settings/handlers to change.) |
| </p> |
| </div> |
| </div> |
| <div class="compact marquee" id="div_language"> |
| <select id="select_language" onchange="updateCountry()"> |
| </select> <select id="select_dialect"> |
| </select> |
| </div> |
| </div> |
| </div> |
| |
| <script src="http://www.google.com/intl/en/chrome/assets/common/js/chrome.min.js"> |
|
|
| </script> |
| <script> |
| var chrmMenuBar = new chrm.ui.MenuBar(); |
| chrmMenuBar.decorate('nav'); |
| var chrmLogo = new chrm.ui.Logo('logo'); |
| |
| var chrmscroll = new chrm.ui.SmoothScroll('scroll'); |
| chrmscroll.init(); |
| |
| |
| |
| window.___gcfg = { lang: 'en' }; |
| (function () { |
| var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; |
| po.src = 'https://apis.google.com/js/plusone.js'; |
| var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); |
| })(); |
| |
| |
| |
| |
| var doubleTracker = new gweb.analytics.DoubleTrack('floodlight', { |
| src: 2542116, |
| type: 'clien612', |
| cat: 'chrom0' |
| }); |
| doubleTracker.track(); |
| |
| doubleTracker.trackClass('doubletrack', true); |
| </script> |
| <script> |
| var langs = |
| [['Afrikaans', ['af-ZA']], |
| ['Bahasa Indonesia', ['id-ID']], |
| ['Bahasa Melayu', ['ms-MY']], |
| ['Català', ['ca-ES']], |
| ['Čeština', ['cs-CZ']], |
| ['Dansk', ['da-DK']], |
| ['Deutsch', ['de-DE']], |
| ['English', ['en-AU', 'Australia'], |
| ['en-CA', 'Canada'], |
| ['en-IN', 'India'], |
| ['en-NZ', 'New Zealand'], |
| ['en-ZA', 'South Africa'], |
| ['en-GB', 'United Kingdom'], |
| ['en-US', 'United States']], |
| ['Español', ['es-AR', 'Argentina'], |
| ['es-BO', 'Bolivia'], |
| ['es-CL', 'Chile'], |
| ['es-CO', 'Colombia'], |
| ['es-CR', 'Costa Rica'], |
| ['es-EC', 'Ecuador'], |
| ['es-SV', 'El Salvador'], |
| ['es-ES', 'España'], |
| ['es-US', 'Estados Unidos'], |
| ['es-GT', 'Guatemala'], |
| ['es-HN', 'Honduras'], |
| ['es-MX', 'México'], |
| ['es-NI', 'Nicaragua'], |
| ['es-PA', 'Panamá'], |
| ['es-PY', 'Paraguay'], |
| ['es-PE', 'Perú'], |
| ['es-PR', 'Puerto Rico'], |
| ['es-DO', 'República Dominicana'], |
| ['es-UY', 'Uruguay'], |
| ['es-VE', 'Venezuela']], |
| ['Euskara', ['eu-ES']], |
| ['Filipino', ['fil-PH']], |
| ['Français', ['fr-FR']], |
| ['Galego', ['gl-ES']], |
| ['Hrvatski', ['hr_HR']], |
| ['IsiZulu', ['zu-ZA']], |
| ['Íslenska', ['is-IS']], |
| ['Italiano', ['it-IT', 'Italia'], |
| ['it-CH', 'Svizzera']], |
| ['Lietuvių', ['lt-LT']], |
| ['Magyar', ['hu-HU']], |
| ['Nederlands', ['nl-NL']], |
| ['Norsk bokmål', ['nb-NO']], |
| ['Polski', ['pl-PL']], |
| ['Português', ['pt-BR', 'Brasil'], |
| ['pt-PT', 'Portugal']], |
| ['Română', ['ro-RO']], |
| ['Slovenščina', ['sl-SI']], |
| ['Slovenčina', ['sk-SK']], |
| ['Suomi', ['fi-FI']], |
| ['Svenska', ['sv-SE']], |
| ['Tiếng Việt', ['vi-VN']], |
| ['Türkçe', ['tr-TR']], |
| ['Ελληνικά', ['el-GR']], |
| ['български', ['bg-BG']], |
| ['Pусский', ['ru-RU']], |
| ['Српски', ['sr-RS']], |
| ['Українська', ['uk-UA']], |
| ['한국어', ['ko-KR']], |
| ['中文', ['cmn-Hans-CN', '普通话 (中国大陆)'], |
| ['cmn-Hans-HK', '普通话 (香港)'], |
| ['cmn-Hant-TW', '中文 (台灣)'], |
| ['yue-Hant-HK', '粵語 (香港)']], |
| ['日本語', ['ja-JP']], |
| ['हिन्दी', ['hi-IN']], |
| ['ภาษาไทย', ['th-TH']]]; |
| |
| for (var i = 0; i < langs.length; i++) { |
| select_language.options[i] = new Option(langs[i][0], i); |
| } |
| select_language.selectedIndex = 7; |
| updateCountry(); |
| select_dialect.selectedIndex = 6; |
| showInfo('info_start'); |
| |
| function updateCountry() { |
| for (var i = select_dialect.options.length - 1; i >= 0; i--) { |
| select_dialect.remove(i); |
| } |
| var list = langs[select_language.selectedIndex]; |
| for (var i = 1; i < list.length; i++) { |
| select_dialect.options.add(new Option(list[i][1], list[i][0])); |
| } |
| select_dialect.style.visibility = list[1].length == 1 ? 'hidden' : 'visible'; |
| } |
| |
| var create_email = false; |
| var final_transcript = ''; |
| var recognizing = false; |
| var ignore_onend; |
| var start_timestamp; |
| if (!('webkitSpeechRecognition' in window)) { |
| upgrade(); |
| } else { |
| start_button.style.display = 'inline-block'; |
| var recognition = new webkitSpeechRecognition(); |
| recognition.continuous = true; |
| recognition.interimResults = true; |
| |
| recognition.onstart = function () { |
| recognizing = true; |
| showInfo('info_speak_now'); |
| start_img.src = '/intl/en/chrome/assets/common/images/content/mic-animate.gif'; |
| }; |
| |
| recognition.onerror = function (event) { |
| if (event.error == 'no-speech') { |
| start_img.src = '/intl/en/chrome/assets/common/images/content/mic.gif'; |
| showInfo('info_no_speech'); |
| ignore_onend = true; |
| } |
| if (event.error == 'audio-capture') { |
| start_img.src = '/intl/en/chrome/assets/common/images/content/mic.gif'; |
| showInfo('info_no_microphone'); |
| ignore_onend = true; |
| } |
| if (event.error == 'not-allowed') { |
| if (event.timeStamp - start_timestamp < 100) { |
| showInfo('info_blocked'); |
| } else { |
| showInfo('info_denied'); |
| } |
| ignore_onend = true; |
| } |
| }; |
| |
| recognition.onend = function () { |
| recognizing = false; |
| if (ignore_onend) { |
| return; |
| } |
| start_img.src = '/intl/en/chrome/assets/common/images/content/mic.gif'; |
| if (!final_transcript) { |
| showInfo('info_start'); |
| return; |
| } |
| showInfo(''); |
| if (window.getSelection) { |
| window.getSelection().removeAllRanges(); |
| var range = document.createRange(); |
| range.selectNode(document.getElementById('final_span')); |
| window.getSelection().addRange(range); |
| } |
| if (create_email) { |
| create_email = false; |
| createEmail(); |
| } |
| }; |
| |
| recognition.onresult = function (event) { |
| var interim_transcript = ''; |
| if (typeof (event.results) == 'undefined') { |
| recognition.onend = null; |
| recognition.stop(); |
| upgrade(); |
| return; |
| } |
| for (var i = event.resultIndex; i < event.results.length; ++i) { |
| if (event.results[i].isFinal) { |
| final_transcript += event.results[i][0].transcript; |
| } else { |
| interim_transcript += event.results[i][0].transcript; |
| } |
| } |
| final_transcript = capitalize(final_transcript); |
| final_span.innerHTML = linebreak(final_transcript); |
| interim_span.innerHTML = linebreak(interim_transcript); |
| if (final_transcript || interim_transcript) { |
| showButtons('inline-block'); |
| } |
| }; |
| } |
| |
| function upgrade() { |
| start_button.style.visibility = 'hidden'; |
| showInfo('info_upgrade'); |
| } |
| |
| var two_line = /\n\n/g; |
| var one_line = /\n/g; |
| function linebreak(s) { |
| return s.replace(two_line, '<p></p>').replace(one_line, '<br>'); |
| } |
| |
| var first_char = /\S/; |
| function capitalize(s) { |
| return s.replace(first_char, function (m) { return m.toUpperCase(); }); |
| } |
| |
| function createEmail() { |
| var n = final_transcript.indexOf('\n'); |
| if (n < 0 || n >= 80) { |
| n = 40 + final_transcript.substring(40).indexOf(' '); |
| } |
| var subject = encodeURI(final_transcript.substring(0, n)); |
| var body = encodeURI(final_transcript.substring(n + 1)); |
| window.location.href = 'mailto:?subject=' + subject + '&body=' + body; |
| } |
| |
| function copyButton() { |
| if (recognizing) { |
| recognizing = false; |
| recognition.stop(); |
| } |
| copy_button.style.display = 'none'; |
| copy_info.style.display = 'inline-block'; |
| showInfo(''); |
| } |
| |
| function emailButton() { |
| if (recognizing) { |
| create_email = true; |
| recognizing = false; |
| recognition.stop(); |
| } else { |
| createEmail(); |
| } |
| email_button.style.display = 'none'; |
| email_info.style.display = 'inline-block'; |
| showInfo(''); |
| } |
| |
| function startButton(event) { |
| if (recognizing) { |
| recognition.stop(); |
| return; |
| } |
| final_transcript = ''; |
| recognition.lang = select_dialect.value; |
| recognition.start(); |
| ignore_onend = false; |
| final_span.innerHTML = ''; |
| interim_span.innerHTML = ''; |
| start_img.src = 'http://www.google.com/intl/en/chrome/assets/common/images/content/mic-slash.gif'; |
| showInfo('info_allow'); |
| showButtons('none'); |
| start_timestamp = event.timeStamp; |
| } |
| |
| function showInfo(s) { |
| if (s) { |
| for (var child = info.firstChild; child; child = child.nextSibling) { |
| if (child.style) { |
| child.style.display = child.id == s ? 'inline' : 'none'; |
| } |
| } |
| info.style.visibility = 'visible'; |
| } else { |
| info.style.visibility = 'hidden'; |
| } |
| } |
| |
| var current_style; |
| function showButtons(style) { |
| if (style == current_style) { |
| return; |
| } |
| current_style = style; |
| copy_button.style.display = style; |
| email_button.style.display = style; |
| copy_info.style.display = 'none'; |
| email_info.style.display = 'none'; |
| } |
| </script> |
| </body> |
|
|
| </html> |
