angular - Why is my SpeechSynthesis onboundary event not firing - Stack Overflow

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>