Как работает озвучивание текста с помощью speechSynthesis?

190
26 марта 2022, 15:30

Возникла необходимость реализовать озвучивание текста на сайте.
Для этого использовался метод speechSynthesis, но на некоторые вопросы, касающиеся работы функции, так и остались открытыми.
Хотелось бы узнать, на каком уровне работает данная функция? Есть предположение, что она работает на уровне браузера (при закрытии вкладки озвучивание продолжается, если не обработать этот в коде), но, никакого подтверждения этому так и не найдено.
Вопрос из этой же тематики - почему на вкладке не появляется динамик, когда происходит озвучивание? К примеру, когда на многих браузерах в какой-либо вкладке идет звуковое сопровождение (будь то музыка или фильм), на самой вкладке появляется значок динамика. При запуске озвучивания текста с помощью speechSynthesis такого не происходит.
Возможно кто-нибудь сможет пролить свет на эту тему.

Код скрипта:

    <script>
        let description = document.getElementsByClassName('product-info__description')[0];
        let synth = window.speechSynthesis;
        let play = document.getElementsByClassName('play')[0];
        let utterance = new SpeechSynthesisUtterance(description.innerText);
        utterance.lang = 'ru-Ru'
        let isSpeak = false;            
        window.onblur = () => {
            if (isSpeak === true) {
                synth.pause(utterance);
                play.innerText = '►';
                isSpeak = false;
            }
        }
        window.onunload = () => {
            synth.cancel(utterance); 
        }
        function speak(){
            if (isSpeak === false) {
                play.innerText = '■';
                isSpeak = true;
                synth.speak(utterance);
                synth.resume(utterance);
            } else if (isSpeak === true) {
                synth.pause(utterance);
                play.innerText = '►';
                isSpeak = false;
            }
        }
    </script>
READ ALSO
Реализация мини слайдера — почему в одном случае стрелка работает правильно, а в другом нет?

Реализация мини слайдера — почему в одном случае стрелка работает правильно, а в другом нет?

Всем привет В общем, я делаю свой мини слайдер, и на этом моменте я просто застрял, не понимаю в чем ошибка

121
Максимальное значение setinterval и как его обойти

Максимальное значение setinterval и как его обойти

использую setinterval и тут у меня возник один вопросКак я понял, максимальное значение - 2147483647, если указать 2147483648, то код будет выполняться сразу

136
Multiple Select2 связанные option

Multiple Select2 связанные option

поставили мне задачу, в которой я не разбирался никогда ранее, было бы не плохо, если бы кто-нибудь смог помочь

203
Как передать данные из одного компонента в другой?

Как передать данные из одного компонента в другой?

Есть код, который выводит посты и по клику на пост показывает его полное содержимое

145