Малоизвестная функция синтеза речи HTML5

Если вы послушаете его, то обнаружите, что воспроизводимый звук — это не заранее записанный аудиоматериал, а синтезированная речь посредством распознавания текста.

Пожалуйста, сначала наденьте наушники, а затем скопируйте следующий код в консоль Chrome, чтобы испытать его ~

 let msg = new SpeechSynthesisUtterance(Добро пожаловать на чтение моего блога);window.speechSynthesis.speak(msg);

Посмотрите, не сложно реализовать синтез речи на фронтенде

Из приведенного выше примера мы можем догадаться о функциях двух названных выше методов.

 SpeechSynthesisUtterancwindow.speechSynthesis.speak

Конечно, синтез речи включает не только эти два API, но начнём с этих двух пунктов.

Ссылка: Developer.mozilla.org/en-US/docs/… Объект SpeechSyntehesisUtteranc содержит контент, который будет прочитан речевым сервисом, а также некоторые параметры, такие как язык, высота тона и громкость.

 SpeechSynthesisUtteranc()SpeechSynthesisUtterance.langSpeechSynthesisUtterance.pitchSpeechSynthesisUtterance.rateSpeechSynthesisUtterance.voiceSpeechSynthesisUtterance.volume

Примечание. Все вышеперечисленные свойства доступны для чтения и записи! Вы можете скопировать код ниже и попробовать. Инструкции будут в комментариях.

 let msg = new SpeechSynthesisUtterance();msg.text = как дела // Текст для синтеза msg.lang = en-US // Произношение американского английского (выбирается автоматически по умолчанию) msg.rate = 2 // Двойная скорость (по умолчанию) равно 1, диапазон 0,1–10) msg.pitch = 2 // Высокий тон (чем больше число, тем резче, значение по умолчанию — 1, диапазон 0–2) msg.volume = 0,5 // Увеличение громкости в 0,5 раза (по умолчанию 1, диапазон 0–1) window.speechSynthesis.speak(msg);

В то же время этот объект также может реагировать на ряд событий, которые можно использовать:

• начинать
• конец
• граница
• пауза
• резюме

С помощью этих событий мы можем выполнять некоторые простые функции, например, подсчитывать количество слов в английских предложениях:

 let count = 0; // Количество слов let msg = new SpeechSynthesisUtterance();let Synth = window.speechSynthesis;msg.addEventListener('start',()=>{ // Начинаем читать console.log(`Текстовое содержимое: $ {msg.text}`); console.log(start);});msg.addEventListener('end',()=>{ // Конец чтения console.log(end); console.log(`Количество текстовых слов (слов): ${count}`); count = 0;});msg.addEventListener('boundary',()=>{ // Подсчет слов count++;});

После попытки, поскольку в китайском языке для разделения каждого слова не используются пробелы, оно будет распознано автоматически. Например, добро пожаловать читателям будет распознаваться как два слова: добро пожаловать и читатель.

Ссылка: Developer.mozilla.org/en-US/docs/…

Поговорив о SpeechSyntehesisUtteranc, давайте взглянем на SpeechSynthesis.

Основная функция SpeechSynthesis — выполнение ряда элементов управления речью, таких как запуск или пауза.

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

 SpeechSynthesis.pausedSpeechSynthesis.pending

Существует также ряд методов манипулирования речью:

• SpeechSynthesis.speak() начинает чтение речи и одновременно запускает стартовое событие.

• SpeechSynthesis.pause() приостанавливает и запускает событие паузы.

• SpeechSynthesis.resume() продолжает работу и одновременно запускает событие возобновления.

• SpeechSynthesis.cancel() отменяет чтение и одновременно запускает конечное событие.

Основываясь на этих методах работы, мы можем еще больше улучшить нашу программу чтения текста:

Вернемся к исходной отправной точке. На основании вышеизложенного мы можем догадаться, как на некоторых сайтах реализовано автоматическое чтение статей.

Если интерфейс этого веб-сайта использует инфраструктуру MVVM (возьмем, к примеру, Vue), то содержимое статьи может храниться в данных, которые можно использовать для построения необходимого нам синтеза речи.

Конечно, также возможно, что статья получается через ajax-запрос, анализируются запрошенные данные и создается объект синтеза речи.

Если статья написана непосредственно на HTML, то DOM на этом этапе необходимо разобрать после тестирования даже следующей хаотичной структуры.

 <div id=test> <p>1</p> <p>2</p> <ul> <li>3</li> <li>4</li> </ul> <table> <tr > <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </table> <img src=https://www.baidu.com/img/bd_logo1.png 9</div>

Прочитайте текст напрямую через InnerText, затем сконструируйте объект синтеза речи, а также можете прочитать его в нужном порядке (картинки будут игнорироваться)

Конечно, если мы хотим игнорировать некоторые специальные структуры, такие как таблицы, мы можем потратить немного энергии на анализ и фильтрацию данных или элементов DOM, которые нам не нужны.

Несмотря ни на что, мы сможем найти подходящее решение~

Эта функция все еще находится на стадии разработки и не получила широкой поддержки.

Опять же, этот API пока нельзя применять в производственных средах.

В настоящее время более распространенным подходом является создание API (возможно, стороннего API), который синтезирует текст в речевой файл на внутренней стороне, а затем воспроизводит его как медиафайл на внешней стороне.

Однажды, когда я был в замешательстве, я прочитал несколько статей экспертов и некоторые мысли старших руководителей о фронтенд-разработке. Одна вещь произвела на меня глубокое впечатление:

Интерфейсная часть максимально приближена к пользователю. Все должно рассматриваться с точки зрения пользователя. Безбарьерное использование также является очень важным вопросом. Хотя выгоды от такой функции гораздо меньше, чем от других предприятий, чтобы продукт лучше обслуживал пользователей, стоит приложить больше усилий. Это также дух фронтенд-разработки.

Вышеуказанное представляет собой малоизвестную функцию синтеза речи HTML5, представленную редактором. Надеюсь, она будет вам полезна. Если у вас есть вопросы, оставьте мне сообщение, и редактор ответит вам вовремя!