annyang-dictation-01.html

<div class="row">
	<div class="col-md-2 col-sm-2 col-xs-2">
		<p><button class="btn btn-primary btn-sm" id="record-btn"><span>Record</span></button></p>
	</div><!-- .col -->
	<div class="col-md-10 col-sm-10 col-xs-10">
		<div class="panel panel-default">
			<div class="panel-heading">Dictation Output</div>
			<div class="panel-body">
				<textarea id="dictation" class="form-control" placeholder="Spoken text will appear here"></textarea>
			</div>
		</div>
	</div><!-- .col -->
</div><!-- .row -->

<script src="/assets/js/annyang.min.js"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
	"use strict";
	
	$(document).ready(function() {
		// first we make sure annyang started succesfully
		if (annyang) {
			var isRecording = false;						// create var to track recording state			
			
			// record/stop button functionality
			$("#record-btn").click(function(event){
				event.preventDefault();
				// if we're recording when the button is clicked
				if(isRecording) {
					annyang.abort();						// stop listening
					isRecording = false;					// set recording var to false
					$("span",this).text('Record');			// change btn text
					$(this).removeClass('btn-danger');		// turn off red class
					$(this).addClass('btn-primary');		// turn on blue class
					
				// if we're not recording when the button is clicked
				} else {
					annyang.start();						// start listening
					isRecording = true;						// set recording var to true
					$("span",this).text('Stop');			// change btn text
					$(this).removeClass('btn-primary');		// turn off blue class
					$(this).addClass('btn-danger');			// turn on red class
				}
			});
			
			// define the functions our commands will run.
			var hello = function() {
				$("#dictation").text('hello.');
			};
			
			var writeIt = function(repeat) {
				$("#dictation").text(repeat);
			}

			// 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,
				'*repeat':				writeIt
			};

			annyang.debug();								// turn on debugging (console messages)

			// Add voice commands to respond to
			annyang.addCommands(commands);

		} else {
			$("#dictation").text('Sorry, browser not supported.');
		}
	});
</script>