Что, если бы ваш сайт мог разговаривать со своими посетителями? Может быть, он сможет прочитать им содержимое. Это может быть отличным способом сделать ваш сайт более доступным. Что, если бы это можно было сделать на стороне клиента, используя простой код JavaScript и не требуя обработки на стороне сервера?
Современные веб-браузеры имеют множество встроенных функций, к которым разработчики могут получить доступ с помощью JavaScript. Одной из таких вещей является Web Speech API. Web Speech API по-прежнему считается экспериментальным, но состоит из двух частей, связанных с синтезом и распознаванием.
Мы можем использовать синтезирующую часть API для генерации речи пользователю.
Давайте создадим простую форму на HTML-странице, которая позволит пользователю ввести какой-либо текст, чтобы веб-страница ответила ему.
<form> <div>Say what:</div> <div> <input type="text" value="Hello world, how are you today?"> </div> <div> <button>Say it</button> </div> </form>
Это простая форма с одним вводом текста, который мы предварительно заполнили, и кнопкой отправки. Давайте добавим немного JavaScript для обработки того, что происходит, когда нажимается кнопка отправки. Он создаст экземпляр API SpeechSynthesisUtterance и будет использовать его для произнесения введенного пользователем текста.
<script>
var synth = window.speechSynthesis;
var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('input');
inputForm.onsubmit = function(event) {
event.preventDefault();
var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
synth.speak(utterThis);
}
</script>
Должно быть ясно, что здесь происходит. Мы получаем значение, введенное в текстовое поле, и передаем его в конструктор SpeechSynthesisUtterance. Затем мы говорим ему говорить.
В этом API есть еще кое-что, например, возможность установить голос, который следует использовать, а также изменить такие вещи, как высота тона и громкость.
Это не обязательно должно исходить из формы. Его можно настроить так, чтобы он читал пользователю при загрузке страницы, при наведении курсора на элемент или при щелчке. Возможно, у вас может быть значок или кнопка «прочитай мне», на которую пользователь может нажать и слушать, пока он едет или едет на работу.
