https://chemal-altai.ru/simai/asset/simai.special/js/voice.js

1"use strict";
2
3/* вызов события при выделении текста */
4
5var speakText = function(event) {
6  // поиск всех кнопок с классом voice на странице
7  var isButton = document.getElementsByClassName("voice");
8 
9  /* получаем выделенный текст  */
10  var selObj = window.getSelection();
11  var utterance = new SpeechSynthesisUtterance(selObj);
12  utterance.lang = "ru-RU";
13
14  /* создание кнопки на странице  */
15  var addButton = document.createElement("button");
16  var icon = document.createElement("i");
17  var tag = event.target.tagName;
18
19  /* кнопка для прекращения озвучивания текста */
20  const stopSpeakButton = document.querySelector(".stopSpeak");
21
22  /* если выделен текст и нету  кнопки */
23  if (selObj.toString().length > 2 && !(tag === "BUTTON" || tag === "svg" || tag === "path") && isButton.length < 1) {
24    /* кнопка для чтения */
25    addButton.className = "voice";
26    icon.className = "fas fa-volume-up";
27    stopSpeakButton.addEventListener("click", function () {
28      speechSynthesis.pause();
29      stopSpeakButton.style.display = "none";
30      addButton.style.display = "block";
31    });
32
33    /* получаем позицию, где произошел клик */
34    addButton.style.top = event.pageY + 60 + 'px';
35    addButton.style.left = event.pageX - 20 + 'px';
36
37    /* добавление кнопки в DOM-дерево */
38    document.body.appendChild(addButton);
39    addButton.appendChild(icon);
40
41    /* событие на кнопке */
42    addButton.addEventListener("click", function () {
43      /* озвучиваем выделенный текст */
44      speechSynthesis.resume();
45      speechSynthesis.speak(utterance);
46      /* скрываем кнопку воспроизведения */
47      addButton.style.display = "none";
48
49      /* Показываем кнопку прекращения озвучки */
50      stopSpeakButton.style.display = "block";
51      stopSpeakButton.style.top = event.pageY + 60 + 'px';
52      stopSpeakButton.style.left = event.pageX - 20 + 'px';
53    });
54
55  } else if (selObj.toString().length < 2)  {
56    /* Удаление кнопки  */
57    for (var i = 0; i < isButton.length; i++) {
58      document.body.removeChild(isButton[i]);
59    }
60    stopSpeakButton.style.display = "none";
61    /* Остановить чтение текста */
62    selObj = "";
63    speechSynthesis.cancel();
64  }
65};
66

67if (navigator.userAgent.search(/MSIE/) > 0 || navigator.userAgent.search(/NET CLR /) > 0) {
68  console.log("Internet Explorer не поддерживает чтение текста!");
69} else {
70  document.addEventListener("click", speakText);
71}