SpeechSynthesis возобновляет работу самостоятельно при загрузке iFrame в браузере Firefox. Это ограничение SpeechSynthesis?

Я использую веб-API speechSynthesis в своем веб-приложении, я создал одну кнопку-переключатель, которая запускает, приостанавливает и возобновляет речьSynthesis. Также я создал еще одну кнопку, которая устанавливает источник в Iframe.

При запуске приложения в браузере firefox voiceSynthesis возобновляется сам по себе, когда я устанавливаю источник в Iframe.

Вот мой код (index.hrml):

<html>
<head>
  <script>
    var btnState = 'Start';
    var ttsState = 'completed';
    function toggleTTS() {
      if (btnState === 'Start') {
        if (ttsState === 'completed') {
          StopTTS();
          ttsState = 'started';
          speak(document.getElementById("speakText").innerText);
          document.getElementById('toggleBtn').innerHTML = "Pause";
        } else {
          ResumeTTS();
        }
        btnState = 'Stop';
      } else {
        PauseTTS();
        btnState = 'Start';
        document.getElementById('toggleBtn').innerHTML = "Resume";
      }
    }
    function StopTTS() {
      speechSynthesis.cancel();
    }
    function PauseTTS() {
      if (!speechSynthesis.paused && speechSynthesis.pause) {
        speechSynthesis.pause();
      }
    }
    function ResumeTTS() {
      if (speechSynthesis.pending || speechSynthesis.paused) {
        speechSynthesis.resume();
      }
    }
    function speak(text) {
      var u = new SpeechSynthesisUtterance(text);
      u.lang = 'en-US';
      u.onend = (e) => {
        console.log('completed')
        ttsState = 'completed';
        btnState = 'Start';
        document.getElementById('toggleBtn').innerHTML = "Speak";
      };
      speechSynthesis.speak(u);
    }
    function setSrc(){
      document.getElementById('dummyIframe').src = "index.html";
    }
  </script>
</head>
<body>
  <button id="toggleBtn" onclick="toggleTTS()">Speak</button>
  <button id="setSrcBtn" onclick="setSrc()">SetSrc</button>
  <div id="speakText">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  <iframe id="dummyIframe"></iframe>
</body>
<html>

Действия по воспроизведению ошибки:

  1. Запустите синтез речи, нажав кнопку «Говорить», и сделайте паузу между ними.
  2. Теперь установите источник в iframe, нажав кнопку «setSrc».

Ожидаемый результат: SpeechSynthesis должен оставаться в состоянии паузы.

Фактический результат: SpeechSynthesis самостоятельно возобновляет работу в браузере Firefox.

Примечание. Это происходит только в браузере Firefox, а не в других браузерах.


javascript speech-synthesis
person Abhay    schedule 29.08.2019    source источник
comment
Почему вы хотите это сделать?   -  person Frazer    schedule 29.08.2019
comment
@Frazer Это мое требование к веб-приложению. Я хочу загрузить что-то в свой iFrame. Я попытался вызвать метод speechsynchronous.pause() внутри функции onload iFrame, но безуспешно! Метод speechsynchronous.resume() вызывается сам по себе в firefox, когда мы загружаем iFrame.   -  person Abhay    schedule 30.08.2019
comment
Я не могу воссоздать проблему, если в iFrame загружена другая страница, даже с синтезом речи. Вы действительно хотите загрузить ту же индексную страницу в iFrame? Если да, то почему?   -  person Frazer    schedule 30.08.2019
comment
@Frazer Нет, я не хочу загружать ту же страницу. Я хочу загрузить другую страницу. И нет необходимости иметь речевой синтез внутри этой страницы. Вот один фиктивный плункер, который почти похож на мое приложение. [plnkr.co/edit/uDviOdOBCzzUDWQBvmLu?p=preview] здесь 2 iframes один создается по умолчанию, а другой создается на лету. Когда мы запускаем speechSynthesis в одном iframe и приостанавливаем его, а теперь, когда мы создаем второй iFrame, voiceSynthesis возобновляется.   -  person Abhay    schedule 30.08.2019

Ответы (1)


arrow_upward
0
arrow_downward

В вашем скрипте html2 удалите if(elem !== null) elem.parentNode.removeChild(elem);

В том же файле добавьте это в конец:

document.addEventListener('DOMContentLoaded', () => {
  show2();
  show1();
});
person Frazer    schedule 30.08.2019
comment
Спасибо за это! Хотя я знаю, что проблема будет решена, если мы создадим второй iframe уже в dom и просто покажем/скроем его в соответствии с нашими потребностями. Но для своего приложения я хочу создать его динамически нажатием кнопки, а также хочу удалить его, когда он не нужен. По моему наблюдению, я думаю, что speechSynthesis запутывается, когда мы пытаемся загрузить любой iFrame и запускаем его метод возобновления(). - person Abhay; 31.08.2019
comment
Да, похоже, это ошибка Firefox. Однако это решает проблему, поскольку вы подробно описали ее с помощью кода, и поэтому вы должны принять ответ. - person Frazer; 31.08.2019