<div id="wrapper">
  <h1>Speech Synthesis - Player</h1>
  <label
    >Text:
    <textarea id="textarea">Привет! Как дела?</textarea>
  </label>
  <label
    >Voice:
    <select id="select"></select>
  </label>
  <label
    >Volume:
    <input id="volume" type="range" min="0" max="1" step="0.1" value="1" />
    <span>1</span>
  </label>
  <label
    >Rate:
    <input id="rate" type="range" min="0" max="3" step="0.5" value="1" />
    <span>1</span>
  </label>
  <label
    >Pitch:
    <input id="pitch" type="range" min="0" max="2" step="0.5" value="1" />
    <span>1</span>
  </label>
  <div id="buttons">
    <button class="speak">Speak</button>
    <button class="cancel">Cancel</button>
    <button class="pause">Pause</button>
    <button class="resume">Resume</button>
  </div>
</div>

const U = new SpeechSynthesisUtterance()

let voices = speechSynthesis.getVoices()

speechSynthesis.onvoiceschanged = () => {
  voices = speechSynthesis.getVoices()
  populateVoices(voices)
}

0: SpeechSynthesisVoice
  default: true
  lang: "de-DE"
  localService: false
  name: "Google Deutsch"
  voiceURI: "Google Deutsch"

function populateVoices(voices) {
  // Перебираем голоса и создаем элемент `option` для каждого
  // Текстовым содержимым `option` является название голоса, а значением - индекс голоса в массиве голосов
  voices.forEach((voice, index) => {
    select.options[index] = new Option(voice.name, index)
  })
  // Делаем голосом по умолчанию `Google русский`
  // Он нравится мне больше, чем голос от `Microsoft`
  const defaultVoiceIndex = voices.findIndex(
    (voice) => voice.name === 'Google русский'
  )
  select.selectedIndex = defaultVoiceIndex
  // После этого инициализируем обработчики событий
  initializeHandlers()
}

function initializeHandlers() {
  // Ниже перечислены почти все события, которые возникают при работе с рассматриваемым интерфейсом
  U.onstart = () => console.log('Started')
  U.onend = () => console.log('Finished')
  U.onerror = (err) => console.error(err)
  // Мне не удалось добиться возникновения этих событий
  U.onpause = () => console.log('Paused')
  U.onresume = () => console.log('Resumed')
  // Обработка изменения настроек
  wrapper.onchange = ({ target }) => {
    if (target.type !== 'range') return
    handleChange(target)
  }
  // Обработка нажатия кнопок
  buttons.addEventListener('click', ({ target: { className } }) => {
    // SpeechSynthesis предоставляет таким методы как `speak()`, `cancel()`, `pause()` и `resume()`
    // Вызов метода `speak()` требует предварительной подготовки
    // Кроме того, мы проверяем наличие текста в очереди на озвучивание с помощью атрибута `speaking`
    // Есть еще два атрибута: `pending` и `paused`, но они не всегда возвращают корректные значения
    switch (className) {
      case 'speak':
        if (!speechSynthesis.speaking) {
          convertTextToSpeech()
        }
        break
      case 'cancel':
        return speechSynthesis.cancel()
      case 'pause':
        return speechSynthesis.pause()
      case 'resume':
        return speechSynthesis.resume()
      default:
        return
    }
  })
}

function handleChange(el) {
  el.nextElementSibling.textContent = el.value
}

function convertTextToSpeech() {
  // Получаем текст
  const trimmed = textarea.value.trim()
  if (!trimmed) return
  // Передаем его экземпляру `SpeechSynthesisUtterance`
  U.text = trimmed
  // Получаем выбранный голос
  const voice = voices[select.value]
  // Передаем голос и другие настройки экземпляру
  U.voice = voice
  // язык
  U.lang = voice.lang
  // громкость
  U.volume = volume.value
  // скорость
  U.rate = rate.value
  // высота голоса
  U.pitch = pitch.value
  // Запускаем озвучивание!
  speechSynthesis.speak(U)
}

SpeechSynthesisUtterance
  lang: "ru-RU"
  onboundary: null
  onend: () => console.log('Finished')
  onerror: (err) => console.error(err)
  onmark: null
  onpause: () => console.log('Paused')
  onresume: () => console.log('Resumed')
  onstart: () => console.log('Started')
  pitch: 1
  rate: 1
  text: "Привет! Как дела?"
  voice: SpeechSynthesisVoice { voiceURI: "Google русский", name: "Google русский", lang: "ru-RU", localService: false, default: false }
  volume: 1

window.onkeydown = ({ key }) => {
  switch (key.toLowerCase()) {
    case 's':
      if (!speechSynthesis.speaking) {
        convertTextToSpeech()
      }
      break
    case 'c':
      return speechSynthesis.cancel()
    case 'p':
      return speechSynthesis.pause()
    case 'r':
      return speechSynthesis.resume()
    default:
      return
  }
}

<div id="wrapper">
  <h1>Speech Synthesis - Page Reader</h1>
  <div>
    <button class="play" tabindex="1"></button>
    <p>
      JavaScript — мультипарадигменный язык программирования. Поддерживает
      объектно-ориентированный, императивный и функциональный стили.
      Является реализацией спецификации ECMAScript (стандарт ECMA-262).
    </p>
  </div>
  <div>
    <button class="play" tabindex="2"></button>
    <p>
      JavaScript обычно используется как встраиваемый язык для программного
      доступа к объектам приложений. Наиболее широкое применение находит в
      браузерах как язык сценариев для придания интерактивности
      веб-страницам.
    </p>
  </div>
  <div>
    <button class="play" tabindex="3"></button>
    <p>
      Основные архитектурные черты: динамическая типизация, слабая
      типизация, автоматическое управление памятью, прототипное
      программирование, функции как объекты первого класса.
    </p>
  </div>
</div>

// Это часть должна быть вам знакома по предыдущему примеру
let voices = speechSynthesis.getVoices()
let defaultVoice
speechSynthesis.onvoiceschanged = () => {
  voices = speechSynthesis.getVoices()
  defaultVoice = voices.find((voice) => voice.name === 'Google русский')
  wrapper.addEventListener('click', handleClick)
  window.addEventListener('keydown', handleKeydown)
}
const PLAY = 'play'
const PAUSE = 'pause'
const RESUME = 'resume'
function handleClick({ target }) {
  switch (target.className) {
    case PLAY:
      // При нажатии кнопки `play` в момент озвучивания другого текста,
      // нам нужно прекратить текущее озвучивание перед началом нового
      speechSynthesis.cancel()
      const { textContent } = target.nextElementSibling
      // Об этой части см. ниже
      textContent.split('.').forEach((text) => {
        const trimmed = text.trim()
        if (trimmed) {
          const U = getUtterance(target, text)
          speechSynthesis.speak(U)
        }
      })
      break
    case PAUSE:
      // CSS-класс кнопки отвечает за отображаемую рядом с ней иконку
      // ``- ожидание/стоп, `` - озвучивание/воспроизведение, `` - пауза
      // иконка `` используется в качестве индикатора кнопки, находящейся в фокусе
      target.className = RESUME
      speechSynthesis.pause()
      break
    case RESUME:
      target.className = PAUSE
      speechSynthesis.resume()
      break
    default:
      break
  }
}
// При нажатии `escape` прекращаем озвучивание текста
// Можете добавить свои контролы
function handleKeydown({ code }) {
  switch (code) {
    case 'Escape':
      return speechSynthesis.cancel()
    default:
      break
  }
}
function getUtterance(target, text) {
  const U = new SpeechSynthesisUtterance(text)
  U.voice = defaultVoice
  U.lang = defaultVoice.lang
  U.volume = 1
  U.rate = 1
  U.pitch = 1
  // Я специально не стал скрывать смену иконок при начале/окончании воспроизведения
  U.onstart = () => {
    console.log('Started')
    target.className = PAUSE
  }
  U.onend = () => {
    console.log('Finished')
    target.className = PLAY
  }
  U.onerror = (err) => console.error(err)
  return U
}

<div id="wrapper">
  <h1>Speech Recognition - Dictaphone</h1>
  <textarea id="final_text" cols="30" rows="10"></textarea>
  <input type="text" id="interim_text" />
  <div id="buttons">
    <button class="start">Старт</button>
    <button class="stop">Стоп</button>
    <button class="abort">Сброс</button>
    <button class="copy">Копия</button>
    <button class="clear">Очистить</button>
  </div>
</div>

let final_transcript = ''
let recognizing = false

// Напоминаю, что `WSA`, в целом, и, особенно, `SpeechRecognition` являются экпериментальными
const speechRecognition =
  window.SpeechRecognition || window.webkitSpeechRecognition
// Создаем экземпляр `SpeechRecognition`
const recognition = new speechRecognition()
// Свойство `continuous` определяет, продолжается ли распознавание речи после получения первого финального результата
recognition.continuous = true
// обработка промежуточных результатов
recognition.interimResults = true
// максимальное количество альтернатив распознанного слова
recognition.maxAlternatives = 3
// язык
recognition.lang = 'ru-RU'

recognition.onstart = () => {
  console.log('Распознавание голоса запущено')
}
recognition.onerror = ({ error }) => {
  console.error(error)
}
recognition.onend = () => {
  console.log('Распознавание голоса закончено')
  // Снова запускаем распознавание, если индикатор имеет значение `true`
  if (!recognizing) return
  recognition.start()
}

const DICTIONARY = {
  точка: '.',
  запятая: ',',
  вопрос: '?',
  восклицание: '!',
  двоеточие: ':',
  тире: '-',
  абзац: '\n',
  отступ: '\t'
}

function editInterim(s) {
  return s
    .split(' ')
    .map((word) => {
      word = word.trim()
      return DICTIONARY[word.toLowerCase()] ? DICTIONARY[word.toLowerCase()] : word
    })
    .join(' ')
}
function editFinal(s) {
  return s.replace(/\s{1,}([\.+,?!:-])/g, '$1')
}

recognition.onresult = (e) => {
  // Промежуточные результаты обновляются на каждом цикле распознавания
  let interim_transcript = ''
  // Перебираем результаты с того места, на котором остановились в прошлый раз
  for (let i = e.resultIndex; i < e.results.length; i++) {
    // Атрибут `isFinal` является индикатором того, что речь закончилась
    if (e.results[i].isFinal) {
      // Редактируем промежуточные результаты
      const result = editInterim(e.results[i][0].transcript)
      // и добавляем их к финальному результату
      final_transcript += result
    } else {
      // В противном случае, записываем распознанные слова в промежуточный результат
      interim_transcript += e.results[i][0].transcript
    }
  }
   // Записываем промежуточные результаты в `input`
  interim_text.value = interim_transcript
  // Редактируем финальный результат
  final_transcript = editFinal(final_transcript)
  // и записываем его в `textarea`
  final_text.value = final_transcript
}

SpeechRecognitionEvent
  bubbles: false
  cancelBubble: false
  cancelable: false
  composed: false
  currentTarget: SpeechRecognition {grammars: SpeechGrammarList, lang: "ru-RU", continuous: true, interimResults: true, maxAlternatives: 3, …}
  defaultPrevented: false
  emma: null
  eventPhase: 0
  interpretation: null
  isTrusted: true
  path: []
  resultIndex: 1
  // здесь нас интересуют только результаты
  results: SpeechRecognitionResultList {0: SpeechRecognitionResult, 1: SpeechRecognitionResult, length: 2}
  returnValue: true
  srcElement: SpeechRecognition {grammars: SpeechGrammarList, lang: "ru-RU", continuous: true, interimResults: true, maxAlternatives: 3, …}
  target: SpeechRecognition {grammars: SpeechGrammarList, lang: "ru-RU", continuous: true, interimResults: true, maxAlternatives: 3, …}
  timeStamp: 59862.61999979615
  type: "result"

results: SpeechRecognitionResultList
  0: SpeechRecognitionResult
    0: SpeechRecognitionAlternative
      confidence: 0.7990190982818604
      transcript: "привет"
    isFinal: true
    length: 1
  length: 1

buttons.onclick = ({ target }) => {
  switch (target.className) {
    case 'start':
      // Обнуляем переменную для финального результата
      final_transcript = ''
      // Запускаем распознавание
      recognition.start()
      // Устанавливаем индикатор распознавания в значение `true`
      recognizing = true
      // Очищаем `textarea`
      final_text.value = ''
      // Очищаем `input`
      interim_text.value = ''
      break
    case 'stop':
      // Останавливаем распознавание
      recognition.stop()
      // Устанавливаем значение индикатора распознавания в значение `false`
      recognizing = false
      break
    case 'abort':
      // Прекращаем распознавание
      recognition.abort()
      recognizing = false
      break
    case 'copy':
      // Копируем текст из `textarea` в буфер обмена
      navigator.clipboard.writeText(final_text.value)
      // Сообщаем об этом пользователю
      target.textContent = 'Готово'
      const timerId = setTimeout(() => {
        target.textContent = 'Копия'
        clearTimeout(timerId)
      }, 3000)
      break
    case 'clear':
      // Обнуляем переменную для финального результата
      final_transcript = ''
      // Очищаем `textarea`
      final_text.value = ''
      break
    default:
      break
  }
}

function removeLastWord() {
  const oldStr = final_text.value
  const newStr = oldStr.substring(0, oldStr.lastIndexOf(' '))
  final_text.value = newStr
}

// home.js
export default /*html*/ `
<div id="wrapper">
  <div>Section 1</div>
  <div>Section 2</div>
  <div>Section 3</div>
  <div>Section 4</div>
  <div>Section 5</div>
  <div>Section 6</div>
  <div>Section 7</div>
  <div>Section 8</div>
  <div>Section 9</div>
</div>
`
// product.js
export default /*html*/ `
<h1>This is the Product Page</h1>
`
// about.js
export default /*html*/ `
<h1>This is the About Page</h1>
`

import HomePage from './pages/home.js'
import ProductPage from './pages/product.js'
import AboutPage from './pages/about.js'
const { body } = document
body.innerHTML = HomePage

// Константы для прокрутки
const DOWN = 'down'
const UP = 'up'
const RIGHT = 'right'
const LEFT = 'left'
// Операции
const ACTIONS = {
  // операции переключения страниц
  home: () => (body.innerHTML = HomePage),
  product: () => (body.innerHTML = ProductPage),
  about: () => (body.innerHTML = AboutPage),
  // операции прокрутки
  down: () => scroll(DOWN),
  up: () => scroll(UP),
  left: () => scroll(LEFT),
  right: () => scroll(RIGHT),
  // операции переключения цветовой темы
  light: () => body.removeAttribute('class'),
  dark: () => (body.className = 'dark')
}

recognition.onresult = (e) => {
  // Перебираем результаты
  for (let i = e.resultIndex; i < e.results.length; i++) {
    if (e.results[i].isFinal) {
      const result = e.results[i][0].transcript.toLowerCase()
      // Выводим слова в консоль, чтобы убедиться в корректности распознавания (как выяснилось, слово `product` очень плохо распознается, возможно, у меня проблемы с его правильным произношением)
      console.log(result)
      // Преобразуем фразу в массив, перебираем слова и выполняем соответствующие операции
      result
        .split(' ')
        .forEach((word) => {
          word = word.trim().toLowerCase()
          // ACTION[word] - это функция
          return ACTIONS[word] ? ACTIONS[word]() : ''
        })
    }
  }
}

function scroll(direction) {
  let newPosition
  switch (direction) {
    case DOWN:
      newPosition = scrollY + innerHeight
      break
    case UP:
      newPosition = scrollY - innerHeight
      break
    case RIGHT:
      newPosition = scrollX + innerWidth
      break
    case LEFT:
      newPosition = scrollX - innerWidth
      break
    default:
      break
  }
  if (direction === DOWN || direction === UP) {
    scrollTo({
      top: newPosition,
      behavior: 'smooth'
    })
  } else {
    scrollTo({
      left: newPosition,
      behavior: 'smooth'
    })
  }
}

window.addEventListener('keydown', (e) => {
  e.preventDefault()
  switch (e.code) {
    // Нажатие пробела запускает распознавание
    case 'Space':
      recognition.start()
      recognizing = true
      break
    // Нажатие `escape` останавливает распознавание
    case 'Escape':
      recognition.stop()
      recognizing = false
    default:
      break
  }
})