JSFiddle - React, Tailwind, and code Playground

HTML

<select id='item-select'>
  <option selected value='first'>First Item</option>
  <option value='second'>Second Item</option>
</select>
<label for='item-interval'>Interval (seconds)</label>
<input id='item-interval' max='10' name='item-interval' type='range' value='2'>
<button id='item-btn'>Speak!</button>
<button id='item-stop'>CEASE FIRE</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JavaScript

var dropdown = $('#item-select'),
  interval = $('#item-interval').val() * 1000,
  itemBtn = $('#item-btn'),
  stopBtn = $('#item-stop'),
  items = {
    'first': ['hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine'],
    'second': ['hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world']
  };

if ('speechSynthesis' in window) {
  function speak(list) {
    console.log(list.length);
    if (list.length) {
      var msg = new SpeechSynthesisUtterance();
      msg.text = list[0];
			
      msg.onstart = function() {
        console.log('speech started!')
      };
      
      msg.addEventListener('end', function(e) {
        console.log('speech ended!')
        window.setTimeout(() => {
        	speak(list.slice(1));
        }, interval);
      });
      
      speechSynthesis.speak(msg);
    }
  }
  
  itemBtn.on('click', function(evt) {
    const list = items[dropdown.val()];  
    speak(list);
  });
  stopBtn.on('click', function(evt) {
    speechSynthesis.cancel();
  });
} else {
  console.log('Voice synthesis isn\'t supported in your browser.');
}