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