diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..89b4cdf --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +*.DS_Store +js/config.js \ No newline at end of file diff --git a/README.md b/README.md index e69de29..1d5c39e 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,7 @@ +HTML5 webspeech +================= + +Google for images using the HTML5 Speech API +--------------------------------------------- + +get your own API key [here](https://code.google.com/apis/console/). \ No newline at end of file diff --git a/css/fonts.css b/css/fonts.css new file mode 100644 index 0000000..10601b0 --- /dev/null +++ b/css/fonts.css @@ -0,0 +1,11 @@ +@font-face { + font-family: 'droid_sansregular'; + src: url('../fonts/DroidSans-webfont.eot'); + src: url('../fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/DroidSans-webfont.woff') format('woff'), + url('../fonts/DroidSans-webfont.ttf') format('truetype'), + url('../fonts/DroidSans-webfont.svg#droid_sansregular') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..f173118 --- /dev/null +++ b/css/style.css @@ -0,0 +1,85 @@ + * { + font-family: 'droid_sansregular'; + } + + h1 { + color: #ccc; + } + + a:link { + color:#777; + text-decoration: none; + } + a:visited { + color:#666; + } + a:hover { + color:#ccc; + } + .button { + background: -webkit-linear-gradient(top,#008dfd 0,#0370ea 100%); + border: 1px solid #076bd2; + border-radius: 3px; + color: #fff; + display: none; + font-size: 13px; + line-height: 1.3; + padding: 8px 25px; + text-align: center; + text-shadow: 1px 1px 1px #076bd2; + letter-spacing: normal; + } + .center { + padding: 10px; + text-align: center; + } + .final { + color: black; + padding-right: 3px; + } + .interim { + color: gray; + } + .info { + font-size: 14px; + text-align: center; + color: #777; + display: none; + } + .right { + float: right; + } + .sidebyside { + display: inline-block; + width: 45%; + min-height: 40px; + text-align: left; + vertical-align: top; + } + #headline { + font-size: 40px; + } + #info { + font-size: 14px; + text-align: center; + color: #777; + visibility: hidden; + } + #results { + font-size: 14px; + border: 1px solid #ddd; + padding: 15px; + text-align: left; + min-height: 150px; + } + #start_button { + border: 0; + background-color:transparent; + padding: 0; + } + .sidebyside { + display:none; + } + #results { + display: none; + } \ No newline at end of file diff --git a/fonts/DroidSans-webfont.eot b/fonts/DroidSans-webfont.eot new file mode 100644 index 0000000..4bb3ed5 Binary files /dev/null and b/fonts/DroidSans-webfont.eot differ diff --git a/fonts/DroidSans-webfont.svg b/fonts/DroidSans-webfont.svg new file mode 100644 index 0000000..9f01d0a --- /dev/null +++ b/fonts/DroidSans-webfont.svg @@ -0,0 +1,2023 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/DroidSans-webfont.ttf b/fonts/DroidSans-webfont.ttf new file mode 100644 index 0000000..3f406f2 Binary files /dev/null and b/fonts/DroidSans-webfont.ttf differ diff --git a/fonts/DroidSans-webfont.woff b/fonts/DroidSans-webfont.woff new file mode 100644 index 0000000..5108393 Binary files /dev/null and b/fonts/DroidSans-webfont.woff differ diff --git a/webspeechdemo/mic-animate.gif b/img/mic-animate.gif similarity index 100% rename from webspeechdemo/mic-animate.gif rename to img/mic-animate.gif diff --git a/webspeechdemo/mic-slash.gif b/img/mic-slash.gif similarity index 100% rename from webspeechdemo/mic-slash.gif rename to img/mic-slash.gif diff --git a/webspeechdemo/mic.gif b/img/mic.gif similarity index 100% rename from webspeechdemo/mic.gif rename to img/mic.gif diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..eb0e481 --- /dev/null +++ b/js/script.js @@ -0,0 +1,313 @@ +var langs = [ + ['Afrikaans', ['af-ZA']], + ['Bahasa Indonesia', ['id-ID']], + ['Bahasa Melayu', ['ms-MY']], + ['Català', ['ca-ES']], + ['Čeština', ['cs-CZ']], + ['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']], + ['Français', ['fr-FR']], + ['Galego', ['gl-ES']], + ['Hrvatski', ['hr_HR']], + ['IsiZulu', ['zu-ZA']], + ['Íslenska', ['is-IS']], + ['Italiano', ['it-IT', 'Italia'], + ['it-CH', 'Svizzera'] + ], + ['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', ['sk-SK']], + ['Suomi', ['fi-FI']], + ['Svenska', ['sv-SE']], + ['Türkçe', ['tr-TR']], + ['български', ['bg-BG']], + ['Pусский', ['ru-RU']], + ['Српски', ['sr-RS']], + ['한국어', ['ko-KR']], + ['中文', ['cmn-Hans-CN', '普通话 (中国大陆)'], + ['cmn-Hans-HK', '普通话 (香港)'], + ['cmn-Hant-TW', '中文 (台灣)'], + ['yue-Hant-HK', '粵語 (香港)'] + ], + ['日本語', ['ja-JP']], + ['Lingua latīna', ['la']] +]; + +for (var i = 0; i < langs.length; i++) { + select_language.options[i] = new Option(langs[i][0], i); +} +select_language.selectedIndex = 6; +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; +var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; +if (!SpeechRecognition) { + upgrade(); +} else { + start_button.style.display = 'inline-block'; + var recognition = new SpeechRecognition(); + recognition.continuous = true; + recognition.interimResults = true; + + recognition.onstart = function() { + recognizing = true; + showInfo('info_speak_now'); + start_img.src = 'img/mic-animate.gif'; + }; + + recognition.onerror = function(event) { + if (event.error == 'no-speech') { + start_img.src = 'img/mic.gif'; + showInfo('info_no_speech'); + ignore_onend = true; + } + if (event.error == 'audio-capture') { + start_img.src = 'img/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; + + console.dir(words); + if (ignore_onend) { + return; + } + start_img.src = 'img/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 = ''; + for (var i = event.resultIndex; i < event.results.length; ++i) { + if (event.results[i].isFinal) { + final_transcript += event.results[i][0].transcript; + addToWords(event.results[i][0].transcript); + console.log("onresult fired with: ", event.results[i][0].transcript, "\nFinal 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, '

').replace(one_line, '
'); +} + +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(); + limit = 10; + count = 0; + return; + } + $('#googleResults').empty(); + final_transcript = ''; + recognition.lang = select_dialect.value; + recognition.start(); + ignore_onend = false; + final_span.innerHTML = ''; + interim_span.innerHTML = ''; + start_img.src = 'img/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'; +} + +var words = []; +var limit = 10; +var count = 0; + +function addToWords(text){ + + /* + Docs: + https://developers.google.com/custom-search/v1/cse/list + */ + var cse_id = 'CSE_ID'; + var api_key = 'API_KEY'; + var url = "https://www.googleapis.com/customsearch/v1?key=" + api_key + "&cx=" + cse_id + "&q=" + text + "&searchType=image&fileType=jpg&imgSize=medium&alt=json"; + + if(window.config){ + var url = "https://www.googleapis.com/customsearch/v1?key=" + window.config.api_key + "&cx=" + window.config.cse_id + "&q=" + text + "&searchType=image&fileType=jpg&imgSize=medium&alt=json"; + } + + if(count < limit){ + $.get(url, function(data) { + var imgSrc = data['items'][0]['link']; + var image = document.createElement("img"); + $(image).hide(); + $(image).attr({'src':imgSrc}); + if(count % 5 == 0){ + $(image).css({ + 'height':'200px', + 'margin':'10px', + 'float':'left', + 'clear':'both' + }); + } else { + $(image).css({ + 'height':'200px', + 'margin':'10px', + 'float':'left' + }); + } + $('#googleResults').append(image); + $(image).fadeIn(2000); + }); + count++; + } +} \ No newline at end of file diff --git a/speech.html b/speech.html new file mode 100644 index 0000000..733119e --- /dev/null +++ b/speech.html @@ -0,0 +1,106 @@ + + + + + Web Speech API Demo + + + + + \ No newline at end of file diff --git a/webspeechdemo.html b/webspeechdemo.html new file mode 100644 index 0000000..84c7e4a --- /dev/null +++ b/webspeechdemo.html @@ -0,0 +1,71 @@ + + + + + Web Speech API Demo + + + + +

+ Web Speech API + Demonstration +

+
+

Click on the microphone icon and begin speaking.

+

Speak now.

+

No speech was detected. You may need to adjust your + + microphone settings.

+ +

Click the "Allow" button above to enable your microphone.

+

Permission to use microphone was denied.

+

Permission to use microphone is blocked. To change, + go to chrome://settings/contentExceptions#media-stream

+

Web Speech API is not supported by this browser. + Upgrade to Chrome + version 25 or later.

+
+
+ +
+
+ + +

+
+
+
+ +
+ Press Control-C to copy text.
(Command-C on Mac.) +
+
+
+ +
+ Text sent to default email application.
+ (See chrome://settings/handlers to change.) +
+
+

+
+ +    + +
+
+
+ + + + + + + \ No newline at end of file diff --git a/webspeechdemo/webspeechdemo.html b/webspeechdemo/webspeechdemo.html deleted file mode 100644 index b4bc72e..0000000 --- a/webspeechdemo/webspeechdemo.html +++ /dev/null @@ -1,391 +0,0 @@ - - -Web Speech API Demo - -

- - Web Speech API Demonstration

-
-

Click on the microphone icon and begin speaking.

-

Speak now.

-

No speech was detected. You may need to adjust your - - microphone settings.

- -

Click the "Allow" button above to enable your microphone.

-

Permission to use microphone was denied.

-

Permission to use microphone is blocked. To change, - go to chrome://settings/contentExceptions#media-stream

-

Web Speech API is not supported by this browser. - Upgrade to Chrome - version 25 or later.

-
-
- -
-
- - -

-

-
-
- -
- Press Control-C to copy text.
(Command-C on Mac.) -
-
-
- -
- Text sent to default email application.
- (See chrome://settings/handlers to change.) -
-
-

-

- -    - -
-
- \ No newline at end of file