Chrome Extension: SpeechSynthesis does not output sound on the first call

I am trying to output sound using SpeechSynthesis. I pre-defined speechSynthesis and SpeechSynthesisUtterance:

TTS = window.speechSynthesis;
utter = new SpeechSynthesisUtterance();
...

let voices = speechSynthesis.getVoices();
this.utter.voice = voices[3];
this.utter.name = voices[3].name;
this.utter.lang = voices[3].lang;
this.utter.voiceURI = voices[3].voiceURI;

When I try to output sound like:

this.utter.text = "say something";
this.TTS.speak(this.utter);

There is no output the first time I call TTS.speak, but this.TTS.speaking becomes true. It happens after it doesn’t play any speech for several minutes.

If I play it a second time, it works:

this.TTS.speak(this.utter);
this.TTS.cancel();
this.TTS.speak(this.utter);

Also, if I make a copy of this.utter and play that copy, it works as well:

let utterance = new SpeechSynthesisUtterance(this.utter.text);
utterance.voice = this.utter.voice;
utterance.name = this.utter.name;
utterance.lang = this.utter.lang;
utterance.voiceURI = this.utter.voiceURI;
this.TTS.speak(utterance);

I found speechSynthesis.speak() without user activation is no longer allowed since M71, around December 2018. However, in this case, each TTS.speak call is triggered by a play button.