Why is my SpeechSynthesis onboundary event not firing

The function onboundaryHandler doesn't get called.

export class TextToSpeechComponent {
public textToSpeak = '';
private synth = window.speechSynthesis;
public voices: SpeechSynthesisVoice[] = this.synth.getVoices();

public play = () => {
let utterance = new SpeechSynthesisUtterance(this.textToSpeak);
utterance.lang = 'en-US';
utterance.onboundary = this.onboundaryHandler;
speechSynthesis.speak(utterance);
}


onboundaryHandler(event: any) {
console.log('onboundaryHandler called *************')
}


}

html:

<div>
<button class="btn btn-primary btn-sm" type="button" (click)="play()">
</div>

Continue reading...