While this is how I found it to make it work, I am not sure if this is the right behavior....
First don't call the speak function it right away, use callback.
2nd, to get time use timeStamp
instead of elapsedTime
. You could have just used performance.now()
as well.
var btn = document.getElementById('btn');
speechSynthesis.cancel()
var u = new SpeechSynthesisUtterance();
u.text = "This text was changed from the original demo.";
var t;
u.onstart = function (event) {
t = event.timeStamp;
console.log(t);
};
u.onend = function (event) {
t = event.timeStamp - t;
console.log(event.timeStamp);
console.log((t / 1000) + " seconds");
};
btn.onclick = function () {speechSynthesis.speak(u);};
Demo: http://jsfiddle.net/QYw6b/2/
you get time passed and both events fired for sure.