Using annyang javascript library (https://www.talater.com/annyang/) to capture a command, process it and speak the result with the html 5 speech synthesis api. This demo works on the desktop and Android versions of Chrome. The 'time' is based on the user's system clock For this test, click **Listen** and ask "What time is it?" (after clicking "a…

voice-command-time-test.html

<div class="row">
	<div class="col-md-2 col-sm-2 col-xs-2">
		<p><button class="btn btn-primary btn-sm" id="speak-btn"><span>Listen</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">Response Status</div>
			<div class="panel-body">
				<textarea id="status" 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() {

		var isRecording = false;						// create var to track recording state			

		// first we make sure annyang started succesfully
		if (annyang) {			
			// record button functionality
			$("#speak-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('Listen');			// 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
				}
			});
			
			// function to speak a response
			var speakText = function(response) {
				
				// setup synthesis
				var msg = new SpeechSynthesisUtterance();
				var voices = window.speechSynthesis.getVoices();
				msg.voice = voices[2];					// Note: some voices don't support altering params
				msg.voiceURI = 'native';
				msg.volume = 1;							// 0 to 1
				msg.rate = 1;							// 0.1 to 10
				msg.pitch = 2;							// 0 to 2
				msg.text = response;
				msg.lang = 'en-US';
				
				speechSynthesis.speak(msg);
			}
			
			// define the 'what time is it' command/response
			var getTime = function() {
				$("#status").text('checking current time.');	// interim display in case of lag
				var d		= new Date();						// setup new Date object
				var weekday	= new Array(7);						// create array containing names of days
				weekday[0]	= "Sunday";
				weekday[1]	= "Monday";
				weekday[2]	= "Tuesday";
				weekday[3]	= "Wednesday";
				weekday[4]	= "Thursday";
				weekday[5]	= "Friday";
				weekday[6]	= "Saturday";

				var currDay = weekday[d.getDay()];					// get current day (text)
				
				var hh		= d.getHours();							// get hours
				var m		= d.getMinutes();						// get minutes
				var dd		= "AM";									// set morning as default
				var h		= hh;									// var to hold current hours
				
				if (h >= 12) {										// if after 12, set time to pm
					h = hh-12;
					dd = "PM";
				}
				if (h == 0) {										// fix for midnight
					h = 12;
				}

				m = m < 10 ? "0" + m : m;							// maintain a two-digit minute
				
				var response = "It is " + h + " " + m + " " + dd;	// build response string
				
				$("#status").text(response);						// write the response to screen
				speakText(response);								// speak the response		
			};			
			
			// define voice commands
			var commands = {
				'what time is it':        	getTime
			};

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

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

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