| | <!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> |
