Tiriree/2voicesSpeech_callback

## 2voicesSpeech_callback
<html>
<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/p5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/addons/p5.dom.js"></script>
	<script src="../lib/p5.speech.js"></script>
	<script>

	var myVoice1 = new p5.Speech('Google UK English Male', speechLoaded); // new P5.Speech object
	var myVoice2 = new p5.Speech('Google UK English Female', speechLoaded); // new P5.Speech object
	//myVoice.onLoad = speechLoaded; // could do it this way
	myVoice1.onStart = speechStarted;
	myVoice1.onPause = speechPaused; // not working
	myVoice1.onResume = speechResumed; // not working
	myVoice1.onEnd = speechEnded;

	myVoice2.onStart = speechStarted;
	myVoice2.onPause = speechPaused; // not working
	myVoice2.onResume = speechResumed; // not working
	myVoice2.onEnd = speechEnded;

	var lyric = "of york.  and all the clouds that.";

	var speakbutton; // UI

	function setup()
	{
		createCanvas(400, 400);

		// button:
		speakbutton = createButton('Speak');
  		speakbutton.position(180, 200);
  		speakbutton.mousePressed(buttonClicked);

	}

	function draw()
	{
		// why draw when you can click?
	}

	function buttonClicked(){
		if(speakbutton.elt.innerHTML=='Speak'){
			myVoice1.speak(lyric);
			myVoice2.speak(lyric);
		}
		else if(speakbutton.elt.innerHTML=='Pause'){
			myVoice1.pause();
			myVoice2.pause();
		}// not working
		else if(speakbutton.elt.innerHTML=='Resume') {
			myVoice1.resume();
			myVoice2.resume();
		} // not working
		else if(speakbutton.elt.innerHTML=='Stop') {
			myVoice1.stop();
			myVoice1.stop();
		}
	}

	function speechLoaded()
	{
  		// say cheers:
		myVoice1.speak("yeah, baby!!!");
		myVoice2.speak("yeah, femalebaby!!!");
	}

	function speechStarted()
	{
		background(0, 255, 0);
		speakbutton.elt.innerHTML = 'Stop';
	}

	// not working...
	function speechPaused()
	{
		background(0, 255, 0);
		speakbutton.elt.innerHTML = 'Resume';
	}

	// not working...
	function speechResumed()
	{
		background(0, 255, 0);
		speakbutton.elt.innerHTML = 'Pause';
	}

	function speechEnded()
	{
		background(255, 0, 0);
		speakbutton.elt.innerHTML = 'Speak';
	}

</script>
</head>
<body>
</body>
</html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/p5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/addons/p5.dom.js"></script>
	<script src="../lib/p5.speech.js"></script>
	<script>

	var myVoice1 = new p5.Speech('Google UK English Male', speechLoaded); // new P5.Speech object
	var myVoice2 = new p5.Speech('Google UK English Female', speechLoaded); // new P5.Speech object
	//myVoice.onLoad = speechLoaded; // could do it this way
	myVoice1.onStart = speechStarted;
	myVoice1.onPause = speechPaused; // not working
	myVoice1.onResume = speechResumed; // not working
	myVoice1.onEnd = speechEnded;

	myVoice2.onStart = speechStarted;
	myVoice2.onPause = speechPaused; // not working
	myVoice2.onResume = speechResumed; // not working
	myVoice2.onEnd = speechEnded;

	var lyric = "of york. and all the clouds that.";

	var speakbutton; // UI

	function setup()
	{
	createCanvas(400, 400);

	// button:
	speakbutton = createButton('Speak');
	speakbutton.position(180, 200);
	speakbutton.mousePressed(buttonClicked);

	}

	function draw()
	{
	// why draw when you can click?
	}

	function buttonClicked(){
	if(speakbutton.elt.innerHTML=='Speak'){
	myVoice1.speak(lyric);
	myVoice2.speak(lyric);
	}
	else if(speakbutton.elt.innerHTML=='Pause'){
	myVoice1.pause();
	myVoice2.pause();
	}// not working
	else if(speakbutton.elt.innerHTML=='Resume') {
	myVoice1.resume();
	myVoice2.resume();
	} // not working
	else if(speakbutton.elt.innerHTML=='Stop') {
	myVoice1.stop();
	myVoice1.stop();
	}
	}

	function speechLoaded()
	{
	// say cheers:
	myVoice1.speak("yeah, baby!!!");
	myVoice2.speak("yeah, femalebaby!!!");
	}

	function speechStarted()
	{
	background(0, 255, 0);
	speakbutton.elt.innerHTML = 'Stop';
	}

	// not working...
	function speechPaused()
	{
	background(0, 255, 0);
	speakbutton.elt.innerHTML = 'Resume';
	}

	// not working...
	function speechResumed()
	{
	background(0, 255, 0);
	speakbutton.elt.innerHTML = 'Pause';
	}

	function speechEnded()
	{
	background(255, 0, 0);
	speakbutton.elt.innerHTML = 'Speak';
	}

	</script>
	</head>
	<body>
	</body>
	</html>