morganney/speechsynthesis-memory-leak.html

## speechsynthesis-memory-leak.html
<!doctype HTML>
<html>
  <head>
    <title>SpeechSynthesis onEnd Counter</title>
  </head>
  <body>
    <h3>How long until the browser crashes?</h3>
    <p>On macOS Monterey 12.5.1 (16GB RAM), Chrome, Firefox and Safari all crash at some point (under 200 secs).</p>
    <button id="start">start</button>
    <button id="stop">stop</button>
    <p id="text"></p>

    <script>
      let count = 1
      let timer = null
      let controller = new AbortController()
      const synth = window.speechSynthesis
      const utter = new SpeechSynthesisUtterance(count)
      const text = document.getElementById('text')
      const onUtterEnd = () => {
        count = count + 1
        utter.text = count
        text.innerHTML = `<mark>${count}</mark>`
        synth.speak(utter)
      }
      const start = () => {
        text.innerHTML = `<mark>${count}</mark>`
        controller = new AbortController()
        utter.addEventListener('end', onUtterEnd, { signal: controller.signal })
        synth.speak(utter)
      }
      const stop = () => {
        controller.abort()
        synth.cancel()
      }

      document.getElementById('start').addEventListener('click', start)
      document.getElementById('stop').addEventListener('click', stop)
    </script>
  </body>
</html>
	<!doctype HTML>
	<html>
	<head>
	<title>SpeechSynthesis onEnd Counter</title>
	</head>
	<body>
	<h3>How long until the browser crashes?</h3>
	<p>On macOS Monterey 12.5.1 (16GB RAM), Chrome, Firefox and Safari all crash at some point (under 200 secs).</p>
	<button id="start">start</button>
	<button id="stop">stop</button>
	<p id="text"></p>

	<script>
	let count = 1
	let timer = null
	let controller = new AbortController()
	const synth = window.speechSynthesis
	const utter = new SpeechSynthesisUtterance(count)
	const text = document.getElementById('text')
	const onUtterEnd = () => {
	count = count + 1
	utter.text = count
	text.innerHTML = `<mark>${count}</mark>`
	synth.speak(utter)
	}
	const start = () => {
	text.innerHTML = `<mark>${count}</mark>`
	controller = new AbortController()
	utter.addEventListener('end', onUtterEnd, { signal: controller.signal })
	synth.speak(utter)
	}
	const stop = () => {
	controller.abort()
	synth.cancel()
	}

	document.getElementById('start').addEventListener('click', start)
	document.getElementById('stop').addEventListener('click', stop)
	</script>
	</body>
	</html>