javascript speech.synthesis.speak properties

Question

I have searched and searched to no avail. There is no clear documentation for this API at least from wht ive found. I want to make a custom object that can hold the properties for this function and be able to run it

console.log(window.speechSynthesis.getVoices());
var voices = window.speechSynthesis.getVoices();
var kline = new Object();

kline.speakAloud = function(message) {
	Speech = new SpeechSynthesisUtterance(message);
	Speech.voice = voices[2];
	Speech.gender = "male";
	Speech.voiceURI = "Google UK English Male";
	Speech.volume = 1; // 0 to 1
	Speech.rate = 1; // 0.1 to 10
	Speech.pitch = 2; //0 to 2
	Speech.lang = 'en-GB';
	window.speechSynthesis.speak(Speech);		
};
kline.speakText = function(message) {
	document.getElementById("Output").innerHTML = message;
};
	
	
	//Arrays for Algorithmic Input Processing 
	
	var Greetings = ["hello", "hey", "hi", "sup"];
	var Functions = ["say", "search", "math", "", "", "", "", ""];


function Run() {
	message = document.getElementById("Input").value.toLowerCase();
	console.log("Successfully ran function" + '\n' + "Input:" + document.getElementById("Input").value + '\n' + "Proccesed input:" + message);
	
	//If statement 
	if (message === ("hello")) { // greating
		kline.speakAloud("testing");
		kline.speakText("testing");
	}
	else if (message === ("X")) { //
		kline.speakAloud("");
		kline.speakText("");	
	}
	else if (message === ("X")) { //
		kline.speakAloud("");
		kline.speakText("");	
	}
	else if (message === ("X")) { //
		kline.speakAloud("");
		kline.speakText("");	
	}
}

If you need to html i can post this as well, its basically a input box and a button to call Run(). The code works but I can not get it to be a male voice. I would like to keep in contained in this same object with a way to call it using methods, if anybody has a way to make it sound male or knows the documentation of this please post this as i hope other people searching for documentation will find your lovely answer.

Im also running linux 15 and chrome version 48. I would like if possible the ability to run this on other browsers. lets take baby steps though.

Answer 1

The most complete documentation is in the Web Speech API Specification.

As described in this answer, the voices array is only loaded after the window.speechSynthesis.onvoiceschanged event has fired. If you move your initialization code to this event then the voices will be available.

var voices = []
var kline = new Object();

window.speechSynthesis.onvoiceschanged = function() {
    voices = window.speechSynthesis.getVoices();
    console.log(voices);
    
    kline.speakAloud = function(message) {
    Speech = new SpeechSynthesisUtterance(message);
    Speech.voice = voices[2];
    Speech.voiceURI = "Google UK English Male";
    Speech.volume = 1; // 0 to 1
    Speech.rate = 1; // 0.1 to 10
    Speech.pitch = 0; //0 to 2
    Speech.lang = 'en-GB';
    window.speechSynthesis.speak(Speech);		
  };
  kline.speakText = function(message) {
    document.getElementById("Output").innerHTML = message;
  };
		
};
	
	//Arrays for Algorithmic Input Processing 
	
	var Greetings = ["hello", "hey", "hi", "sup"];
	var Functions = ["say", "search", "math", "", "", "", "", ""];


function Run() {
	message = document.getElementById("Input").value.toLowerCase();
	console.log("Successfully ran function" + '\n' + "Input:" + document.getElementById("Input").value + '\n' + "Proccesed input:" + message);
	
	//If statement 
	if (message === ("hello")) { // greating
		kline.speakAloud("testing");
		kline.speakText("testing");
	}
	else if (message === ("X")) { //
		kline.speakAloud("");
		kline.speakText("");	
	}
	else if (message === ("X")) { //
		kline.speakAloud("");
		kline.speakText("");	
	}
	else if (message === ("X")) { //
		kline.speakAloud("");
		kline.speakText("");	
	}
}

<input type="text" id="Input" value="hello"/>
<input type="text" id="Output"/>
<button id="run" onclick="Run()">
Run
</button>