Повышение удобства работы пользователей с The API веб-Speech

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

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

1
Кредит изображения: Себастьян Schöld 2

Disclaimer: Эта технология является довольно передовые, и спецификация в настоящее время с W3C как “проект неофициального редактора” давал (как 6 июня 2014 год).Вероятность того, что использование будет немного отличаться от фрагментов кода в этой статье является высокой. Проверка specification __26 | | 3__7 и тщательного тестирования перед выпуском кода всегда мудро .

Выступление Synthesis

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

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

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

function speak(textToSpeak) {
   // Create a new instance of SpeechSynthesisUtterance
   var newUtterance = new SpeechSynthesisUtterance();

   // Set the text
   newUtterance.text = textToSpeak;

   // Add this text to the utterance queue
   window.speechSynthesis.speak(newUtterance);
}

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

speak('Welcome to Smashing Magazine');

Подробнее функциональность включена в SpeechSynthesisUtterance.Вы можете остановить, запустить или приостановить очередь, а также установить язык, скорость и тембр для каждого высказывания.Остановка, запуск или паузу высказывание пожары событие, которое вы можете подключить в, как это делает изменения голоса.Много, чтобы поиграть с

В настоящее время синтез речи поддерживается только в Chrome и Safari (как на настольных и мобильных устройств).Кроме того, голоса, доступных для вас через API в значительной степени зависит от операционной системы.Google имеет свой собственный набор голосов умолчанию для Chrome, доступных на Mac OS X, Windows и Ubuntu.Тем не менее, голоса Mac OS X также доступны и, таким образом, такие же, как в Safari на OSX.Вы можетелегко увидеть, какие голоса доступны в консоли Developer Tools:

window.speechSynthesis.getVoices();

Совет: Если вы находитесь на OS X, проверьте голос

“Zarvox.”

Выступление Recognition

Другая часть API веб-Speech является распознавание речи, которая позволяет пользователю говорить в микрофон устройства и их речь признан сайт или веб-приложение .

Давайте работать через некоторый код.На этот раз мы создадим новый экземпляр SpeechRecognition интерфейса.Потому что эта часть поддерживается только в Chrome, мы должны включить webkit префикс .

var newRecognition = webkitSpeechRecognition();

SpeechRecognition поставляется с довольно несколько атрибутов.Тот, который мы, вероятно, изменить это continuous, которого по умолчанию состояние false означает, что браузер будет перестать слушать после перерыва в речи.Если вы хотите, чтобы ваш веб-сайт или веб-приложение, чтобы слушать, а затем установить атрибут true:

newRecognition.continuous = true;

Для запуска и остановки распознавания речи, называют start() 22 ~ и | методы:

// start recognition
newRecognition.start() ...

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.