Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Adding TTS #107

Merged
merged 2 commits into from

4 participants

@jamessetaro

Greetings!

I've been doing some hacking today at the sponsored event here in Austin working chrome installed applications. I am interested in TTS so I looked at the extension example available already(I didn't see one in the example set):

https://chrome.google.com/webstore/detail/tts-demo/chhkejkkcghanjclmhhpncachhgejoel?hl=en

And ported it over to an installed application with manifest.

Cheers!
James Setaro

@sowbug
Collaborator

2-space indents are misaligned here. Please fix.

Done

@sowbug
Collaborator

Remove commented-out code.

Done

@sowbug
Collaborator

This is a nonstandard name for an application in this samples repo. Would "Text-to-Speech Sample" convey the same meaning?

Done.

@sowbug
Collaborator

Stable is higher than this, so it's safe to leave this out.

Done.

@sowbug
Collaborator

Remove extra vertical space.

Done

@sowbug
Collaborator

This function can be anonymous.

Done

@sowbug
Collaborator

Remove extra vertical whitespace.

Done

@sowbug
Collaborator

Remove extra whitespace.

Done

@sowbug
Collaborator

Remove event-specific language.

@sowbug
Collaborator

Remove extra whitespace.

@PaulKinlan PaulKinlan merged commit d48dd8f into GoogleChrome:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
BIN  tts/128.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
41 tts/main.js
@@ -0,0 +1,41 @@
+/**
+ * Listens for the app launching then creates the window
+ *
+ * @see http://developer.chrome.com/trunk/apps/app.runtime.html
+ * @see http://developer.chrome.com/trunk/apps/app.window.html
+ */
+chrome.app.runtime.onLaunched.addListener(function() {
+ runApp();
+});
+
+/**
+ * Listens for the app restarting then re-creates the window.
+ *
+ * @see http://developer.chrome.com/trunk/apps/app.runtime.html
+ */
+chrome.app.runtime.onRestarted.addListener(function() {
+ runApp();
+});
+
+/**
+ * Creates the window for the application.
+ *
+ * @see http://developer.chrome.com/trunk/apps/app.window.html
+ */
+function runApp() {
+ var screenWidth = screen.availWidth;
+ var screenHeight = screen.availHeight;
+ var width = 500;
+ var height = 300;
+
+ var win = chrome.app.window.create('ttsdemo.html', {
+
+ bounds: {
+ 'width': 1024,
+ 'height': 768
+ }
+ });
+
+ //win.maximize(function(){});
+
+}
View
17 tts/manifest.json
@@ -0,0 +1,17 @@
+{
+ "manifest_version": 2,
+ "name": "Installed TTS Demo",
+ "version": "1",
+ "minimum_chrome_version": "23",
+ "icons": {
+ "128": "128.png"
+ },
+ "app": {
+ "background": {
+ "scripts": ["main.js"]
+ }
+ },
+ "permissions": [
+ "tts"
+ ]
+}
View
170 tts/ttsdemo.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Chrome TTS Demo</title>
+ <style>
+ body {
+ font-family: arial, helvetica, sans-serif;
+ }
+ .banner {
+ width: 100%;
+ float: left;
+ }
+ .banner_left {
+ padding: 8px;
+ float: left;
+ }
+ .banner_right {
+ padding: 8px;
+ }
+ .body_wrapper {
+ width: 100%;
+ float: left;
+ }
+ .body_left {
+ border: 0;
+ padding: 0;
+ margin: 0;
+ width: 50%;
+ float: left;
+ }
+ .body_right {
+ border: 0;
+ padding: 0;
+ margin: 0;
+ width: 46%;
+ float: left;
+ }
+ .body_inner {
+ padding: 0 32px;
+ }
+ #srctext {
+ width: 100%;
+ font-size: 133%;
+ }
+ .large_button {
+ font-size: 166%;
+ padding: 6pt 12pt 6pt 12pt;
+ }
+ .box {
+ margin: 10px;
+ padding: 10px;
+ border: 1px solid #999;
+ }
+ .tabbable {
+ padding: 10px;
+ border: 1px solid #00C;
+ }
+ table {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ #help {
+ text-align: left;
+ }
+ #voiceInfo {
+ text-align: left;
+ padding: 4px;
+ border: 1px solid #aaa;
+ width: 100%;
+ min-height: 100px;
+ overflow: auto;
+ }
+ </style>
+ <script src="ttsdemo.js"></script>
+</head>
+
+<body>
+
+<div class="banner">
+ <div class="banner_left">
+ <img src="128.png" class="logo" alt="">
+ </div>
+ <div class="banner_right">
+ <h1>Chrome Text-to-Speech Demo</h1>
+ <p>
+ Use this application to try out all of the text-to-speech voices in Chrome.
+ </p>
+ </div>
+</div>
+
+<div class="body_wrapper">
+ <div class="body_left">
+ <div class="body_inner">
+
+ Enter text here:
+ <textarea id="srctext" rows="6" cols="40">Hello Hackathon Austin! This is a demo of text-to-speech in an installed Chrome application.</textarea>
+
+ <p>
+ <button id="speak" class="large_button">Speak</button>
+ <button id="stop" class="large_button" >Stop</button>
+ </p>
+
+ <div class="box" id="ttsStatusBox">
+ TTS status: <b><span id="ttsStatus"></span></b>
+ </div>
+
+ <p>
+
+ Click on or tab to these boxes:
+
+ <p>
+
+ <span id="alpha" tabindex="0" class="tabbable">Alpha</span>
+ <span id="bravo" tabindex="0" class="tabbable" >Bravo</span>
+ <span id="charlie" tabindex="0" class="tabbable" >Charlie</span>
+ <span id="delta" tabindex="0" class="tabbable" >Delta</span>
+ <span id="echo" tabindex="0" class="tabbable" >Echo</span>
+ <span id="foxtrot" tabindex="0" class="tabbable" >Foxtrot</span>
+
+ </div>
+ </div>
+ <div class="body_right">
+ <div class="body_inner">
+
+ <table border="0">
+ <tr>
+ <td>Voice:</td>
+ <td><select id="voices">
+ <option value="">Unspecified</option>
+ </select></td>
+ </td>
+ </tr>
+ <tr>
+ <td>Lang:</td>
+ <td><select id="lang">
+ <option value="">Unspecified</option>
+ <option value="de">de (German)</option>
+ <option value="en-GB">en-GB (British English)</option>
+ <option value="en-US" selected>en-US (American English)</option>
+ <option value="es">es (Spanish)</option>
+ <option value="fr">fr (French)</option>
+ <option value="it">it (Italian)</option>
+ </select></td></tr>
+ <tr>
+ <td>Queuing mode:</td>
+ <td><select id="enqueue">
+ <option value="">Interrupt</option>
+ <option value="true">Enqueue</option>
+ </select></td></tr>
+ <tr>
+ <td>Rate:</td>
+ <td><input id="rate" type="range" min="0.5" max="4.0" value="1.0" step="0.1">
+ </td></tr>
+ <tr>
+ <td>Pitch:</td>
+ <td><input id="pitch" type="range" min="0.0" max="2.0" value="1.0" step="0.2">
+ </td></tr>
+ <tr>
+ <td>Volume:</td>
+ <td><input id="volume" type="range" min="0.0" max="1.0" value="1.0" step="0.1">
+ </td></tr>
+ </table>
+
+ <pre id="voiceInfo"></pre>
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
View
133 tts/ttsdemo.js
@@ -0,0 +1,133 @@
+var text;
+var ttsStatus;
+var ttsStatusBox;
+var lang;
+var enqueue;
+var voices;
+var voiceInfo;
+var voiceArray;
+var utteranceIndex = 0;
+
+onload = function() {
+ text = document.getElementById('srctext');
+ ttsStatus = document.getElementById('ttsStatus');
+ ttsStatusBox = document.getElementById('ttsStatusBox');
+ lang = document.getElementById('lang');
+ enqueue = document.getElementById('enqueue');
+ voices = document.getElementById('voices');
+ voiceInfo = document.getElementById('voiceInfo');
+
+
+ document.getElementById('speak').onclick = function speakUserText() {
+ var options = {};
+ if (lang.value) {
+ options.lang = lang.value;
+ }
+ speak(text.value, options, true);
+ }
+
+ document.getElementById('alpha').onfocus = function () {
+ speak("Alpha");
+ };
+
+ document.getElementById('bravo').onfocus = function () {
+ speak("Bravo");
+ };
+
+ document.getElementById('charlie').onfocus = function () {
+ speak("Charlie");
+ };
+
+ document.getElementById('delta').onfocus = function () {
+ speak("Delta");
+ };
+
+ document.getElementById('echo').onfocus = function () {
+ speak("Echo");
+ };
+
+ document.getElementById('foxtrot').onfocus = function () {
+ speak("Foxtrot");
+ };
+
+ document.querySelector('#stop').onclick = function stop() {
+ chrome.tts.stop();
+ }
+
+
+ chrome.tts.getVoices(function(va) {
+ voiceArray = va;
+ for (var i = 0; i < voiceArray.length; i++) {
+ var opt = document.createElement('option');
+ opt.setAttribute('value', voiceArray[i].voiceName);
+ opt.innerText = voiceArray[i].voiceName;
+ voices.appendChild(opt);
+ }
+ });
+ voices.addEventListener('change', function() {
+ var i = voices.selectedIndex - 1;
+ if (i >= 0) {
+ voiceInfo.innerText = JSON.stringify(voiceArray[i], null, 2);
+ } else {
+ voiceInfo.innerText = '';
+ }
+ }, false);
+}
+
+function speak(str, options, highlightText) {
+ if (!options) {
+ options = {};
+ }
+ if (enqueue.value) {
+ options.enqueue = Boolean(enqueue.value);
+ }
+ var voiceIndex = voices.selectedIndex - 1;
+ if (voiceIndex >= 0) {
+ options.voiceName = voiceArray[voiceIndex].voiceName;
+ }
+ var rateValue = Number(rate.value);
+ if (rateValue >= 0.1 && rateValue <= 10.0) {
+ options.rate = rateValue;
+ }
+ var pitchValue = Number(pitch.value);
+ if (pitchValue >= 0.0 && pitchValue <= 2.0) {
+ options.pitch = pitchValue;
+ }
+ var volumeValue = Number(volume.value);
+ if (volumeValue >= 0.0 && volumeValue <= 1.0) {
+ options.volume = volumeValue;
+ }
+ utteranceIndex++;
+ console.log(utteranceIndex + ': ' + JSON.stringify(options));
+ options.onEvent = function(event) {
+ console.log(utteranceIndex + ': ' + JSON.stringify(event));
+ if (event.type == 'error') {
+ console.log('Error: ' + event.errorMessage);
+ }
+ if (highlightText) {
+ text.setSelectionRange(0, event.charIndex);
+ }
+ if (event.type == 'end' ||
+ event.type == 'interrupted' ||
+ event.type == 'cancelled' ||
+ event.type == 'error') {
+ chrome.tts.isSpeaking(function(isSpeaking) {
+ if (!isSpeaking) {
+ ttsStatus.innerHTML = 'Idle';
+ ttsStatusBox.style.background = '#fff';
+ }
+ });
+ }
+ };
+
+ chrome.tts.speak(
+ str, options, function() {
+
+ });
+
+
+ ttsStatus.innerHTML = 'Busy';
+ ttsStatusBox.style.background = '#ffc';
+}
+
+
Something went wrong with that request. Please try again.