Skip to content

Instantly share code, notes, and snippets.

@bogomil
Created June 26, 2015 10:53
Show Gist options
  • Save bogomil/d11d19543f748f8995e0 to your computer and use it in GitHub Desktop.
Save bogomil/d11d19543f748f8995e0 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Voice Application with TTS</title>
<!-- Meta Info -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Style Sheets -->
<link rel="stylesheet" id="stylesheet" href="css/grey-theme.css" type="text/css">
<!-- jQuery and Plugin Code -->
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/d3.min.js"></script>
<script src="js/sohoxi.js"></script>
<script type="text/javascript" src="https://rawgithub.com/hiddentao/google-tts/master/google-tts.min.js"></script>
<script>
$(function() {
$('body').initialize('en-US');
});
var tts;
tts = new GoogleTTS('en-US');
var annyangScript = document.createElement('script');
if (/localhost/.exec(window.location)) {
annyangScript.src = "//localhost:8443/annyang.js"
} else {
annyangScript.src = "//cdnjs.cloudflare.com/ajax/libs/annyang/1.6.0/annyang.min.js"
}
document.write(annyangScript.outerHTML)
</script>
<script>
// "use strict";
// first we make sure annyang started successfully
if (annyang) {
var tts;
// define the functions our commands will run.
var hello = function() {
tts.play("Hello!! To start using this app, say a number from 1 to 5! Enjoy! ");
};
var click_me = function() {
$('#mybtn').trigger('click');
alert('Clicked! ');
};
var good_3 = function() {
$('.slider').data('slider').value(3)
tts.play('what a good choice. Three is a good number');
};
var good_2 = function() {
$('.slider').data('slider').value(2)
tts.play('Yes. Two is the number.');
};
var good_1 = function() {
$('.slider').data('slider').value(1)
tts.play('One ring to rull them all. Congrats!');
};
var good_0 = function() {
$('.slider').data('slider').value(0)
tts.play('Yes. Zero is a number too!');
};
var good_4 = function() {
$('.slider').data('slider').value(4)
tts.play('Four! Four! Who is running! Four!');
};
var good_5 = function() {
$('.slider').data('slider').value(5)
tts.play('. Whooohooo. Five is the best. Five it is.');
};
// define our commands.
// * The key is what you want your users to say say.
// * The value is the action to do.
// You can pass a function, a function name (as a string), or write your function as part of the commands object.
var commands = {
'hello (there)': hello,
'five': good_5,
'four':good_4,
'three':good_3,
'two':good_2,
'one':good_1,
'zero': good_0
};
// OPTIONAL: activate debug mode for detailed logging in the console
annyang.debug();
// Add voice commands to respond to
annyang.addCommands(commands);
// OPTIONAL: Set a language for speech recognition (defaults to English)
annyang.setLanguage('en');
// Start listening. You can call this here, or attach this call to an event, button, etc.
annyang.start();
}
</script>
</head>
<div class="row">
<div class="twelve columns">
<h1>Simple Voice Application</h1>
<span class="label">To start using this app enable your microphone and say 'hello' :)</span>
<hr>
</div>
</div>
<div class="row demo-grid">
<div class="four columns"><div class="content"><h2>What is your favourite number</h2></div></div>
<div class="six columns"><div class="content">
<!--start slider-->
<div class="field">
<input id="quality" name="quality" class="slider" type="range" min="0" max="5" value="1" step="1" data-ticks='[
{"value": 0, "description": "0", "color": "#ed1c24"},
{"value": 1, "description": "1", "color": "#ed1c24"},
{"value": 2, "description": "2", "color": "#faa719"},
{"value": 3, "description": "3", "color": "#4fb521"},
{"value": 4, "description": "4", "color": "#4fb521"},
{"value": 5, "description": "5", "color": "#157a13"}
]'/>
</div>
<!--end slider-->
</div></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment