title: Why does a SpeechSynthesisUtterance sometimes not fire an 'end' event in Chromium-based browsers?
body: <p>In both Chrome (v72, W10) and Opera, the following snippet <em>very occasionally</em> <a href="https://i.stack.imgur.com/PuaYm.png" rel="noreferrer">does not seem to run</a> the attached <code>end</code> listener to the <code>SpeechSynthesisUtterance</code>, maybe 1 out of 50 times the snippet is run. (Sorry, in the original version of this, it could be reproduced much more easily - now, creating the utterance on button click looks to have made the bug much more rare)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>button.onclick = () =&gt; {
    console.log('start script');
    button.disabled = true;
    const utt = new SpeechSynthesisUtterance('e');
    utt.addEventListener('end', () =&gt; {
      console.log('end event triggered');
    });
  
    // just for debugging completeness, no errors seem to be thrown though
    utt.addEventListener('error', (err) =&gt; {
      console.log('err', err)
    });
  
    speechSynthesis.speak(utt);
    setTimeout(() =&gt; {
      console.log('finished?');
    }, 1500);
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="button"&gt;click&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>From what I've seen, if the <code>end</code> event ever activates, it will <em>always</em> activate within a given pageload, which is why I disable the button in the above snippet. (you'll have to rerun the snippet many times to see the problem)</p>
  
  <p>You can reproduce it more readily if you run the below snippet in Chrome (72 on W10) with autoplay restrictions disabled. (go to <code>chrome://flags/</code>, change <strong>Autoplay policy</strong> to <em>No user gesture is required</em>).</p>
  
  <p>(In Opera, it seems to be similarly difficult to reproduce as in the first snippet, unfortunately)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>console.log('start script');
  function say(text) {
    const utt = new SpeechSynthesisUtterance(text);
    utt.addEventListener('end', () =&gt; console.log('end: ' + text));
    
    // just for debugging completeness, no errors seem to be thrown though
    utt.addEventListener('error', (err) =&gt; {
      console.log('err on ' + text + ', ', err)
    });
    
    speechSynthesis.speak(utt);
  }
  
  say('foo');
  say('bar');</code></pre>
  </div>
  </div>
  </p>
  
  <p>Firefox (56) does not have this issue as far as I can see - in it, the <code>end</code> listener always fires properly.</p>
  
  <p>Am I somehow not attaching the listener sufficiently properly, or is this a Chromium bug?</p>