Знакомство
Автор: Евгений Рыжков Дата публикации:
Web Speech API дает возможности распознования и воспроизведения речи. Как применить:
- проговаривание текстовых блоков (по типу как работают голосвые браузеры);
- распознование речи (этому можно найти множество применений, например, реализация диктофона или голосовое заполнение форм).
Где работает
На данный момент только в Chrome 25+.
Mozilla работает над внедрением, по идее скоро тоже должныначать поддерживать.
Как использовать
Небольшой пример, который распознает речь на русском языке и записывает ее в текстовое поле:
var start_button = document.getElementById('start_button'),
recognizing = false, // флаг идет ли распознование
final_transcript = '';
// проверяем поддержку speach api
if (!('webkitSpeechRecognition' in window)) {
start_button.style.display = "none";
showInfo("info_upgrade");
} else { /* инициализируем api */
/* создаем объект */
var recognition = new webkitSpeechRecognition();
/* базовые настройки объекта */
recognition.lang = 'ru'; // язык, который будет распозноваться. Значение - lang code
recognition.continuous = true; // не хотим чтобы когда пользователь прикратил говорить, распознование закончилось
recognition.interimResults = true; // хотим видеть промежуточные результаты. Т.е. мы можем некоторое время видеть слова, которые еще не были откорректированы
/* метод вызывается когда начинается распознование */
recognition.onstart = function() {
recognizing = true;
showInfo('info_speak_now'); // меняем инфо текст
start_button.style.background = 'url(mic-animate.gif)'; // меняем вид кнопки
};
/* обработчик ошибок */
recognition.onerror = function(event) {
if (event.error == 'no-speech') {
start_button.style.background = 'url(mic.gif)';
showInfo('info_no_speech');
}
if (event.error == 'audio-capture') {
start_button.style.background = 'url(mic.gif)';
showInfo('info_no_microphone');
}
};
/* метод вызывается когда распознование закончено */
recognition.onend = function() {
recognizing = false;
start_button.style.background = 'url(mic.gif)';
showInfo('info_start');
};
/*
метод вызывается после каждой сказанной фразы. Параметра event используем атрибуты:
- resultIndex - нижний индекс в результирующем массиве
- results - массив всех результатов в текущей сессии
*/
recognition.onresult = function(event) {
var interim_transcript = '';
/*
обход результирующего массива
*/
for (var i = event.resultIndex; i < event.results.length; ++i) {
/* если фраза финальная (уже откорректированная) сохраняем в конечный результат */
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else { /* иначе сохраянем в промежуточный */
interim_transcript += event.results[i][0].transcript;
}
}
final_span.innerHTML = final_transcript;
interim_span.innerHTML = interim_transcript;
};
}
/* показ нужного сообщения */
function showInfo(id) {
var messages = document.querySelectorAll('p');
for(i=0; i<messages.length; i++) messages[i].style.display = 'none';
document.getElementById(id).style.display = 'block';
}
/* обработчик клика по микрофону */
function startButton(event) {
if (recognizing) { // если запись уже идет, тогда останавливаем
recognition.stop();
return;
}
recognition.start();
}
В живую (работает только в Chrome).
Управление голосом
Простой пример по управлению голосом внешним видом страницы. Распознается две команды: "фон" и "текст". Плюс три цвета: "черный", "белый", "синий". Сначала говорим команду, затем цвет. Т.е. команда звучит так - "фон черный".
var start_button = document.getElementById('start_button'),
recognizing = false, // флаг идет ли распознование
final_transcript = '';
// проверяем поддержку speach api
if (!('webkitSpeechRecognition' in window)) {
start_button.style.display = "none";
showInfo("info_upgrade");
} else { /* инициализируем api */
/* создаем объект */
var recognition = new webkitSpeechRecognition();
/* базовые настройки объекта */
recognition.lang = 'ru'; // язык, который будет распозноваться. Значение - lang code
recognition.continuous = true; // не хотим чтобы когда пользователь прикратил говорить, распознование закончилось
/* метод вызывается когда начинается распознование */
recognition.onstart = function() {
recognizing = true;
showInfo('info_speak_now'); // меняем инфо текст
start_button.style.background = 'url(mic-animate.gif)'; // меняем вид кнопки
};
/* обработчик ошибок */
recognition.onerror = function(event) {
if (event.error == 'no-speech') {
start_button.style.background = 'url(mic.gif)';
showInfo('info_no_speech');
}
if (event.error == 'audio-capture') {
start_button.style.background = 'url(mic.gif)';
showInfo('info_no_microphone');
}
};
/* метод вызывается когда распознование закончено */
recognition.onend = function() {
recognizing = false;
start_button.style.background = 'url(mic.gif)';
showInfo('info_start');
};
/*
метод вызывается после каждой сказанной фразы. Параметра event используем атрибуты:
- resultIndex - нижний индекс в результирующем массиве
- results - массив всех результатов в текущей сессии
*/
recognition.onresult = function(event) {
/*
обход результирующего массива
*/
for (var i = event.resultIndex; i < event.results.length; ++i) {
/* если фраза финальная (уже откорректированная) сохраняем в конечный результат */
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript.toLowerCase();
}
}
final_span.innerHTML = final_transcript;
/*
анализируем строку и ищем в ней команды
сперва ищем команду "фон"
*/
var commandStart = final_transcript.indexOf("фон"),
commandEnd,
colorText,
color;
if( commandStart != -1 ) {
commandEnd = commandStart + 4;
colorText = final_transcript.substring(commandEnd, final_transcript.length); // получили цвет по русски
switch(colorText) // переводим ру текст в en
{
case 'черный' : color = 'black'; break;
case 'синий' : color = 'blue'; break;
case 'белый' : color = 'white'; break;
default: break;
}
document.body.style.backgroundColor = color; // меняем цвет
}
commandStart = final_transcript.indexOf("текст"); // ищем команду "текст"
if( commandStart != -1 ) {
commandEnd = commandStart + 6;
colorText = final_transcript.substring(commandEnd, final_transcript.length);
switch(colorText)
{
case 'черный' : color = 'black'; break;
case 'синий' : color = 'blue'; break;
case 'белый' : color = 'white'; break;
default: break;
}
document.body.style.color = color; // меняем текст
}
final_transcript = ''; // очищаем рапознанный текст
};
}
/* показ нужного сообщения */
function showInfo(id) {
var messages = document.querySelectorAll('p');
for(i=0; i<<messages.length; i++) messages[i].style.display = 'none';
document.getElementById(id).style.display = 'block';
}
/* обработчик клика по микрофону */
function startButton(event) {
if (recognizing) { // если запись уже идет, тогда останавливаем
recognition.stop();
document.getElementById('final_span').innerHTML = '';
return;
}
recognition.start();
}
В живую (работает только в Chrome).
Материалы
- Web Speech API Specification
- Voice Driven Web Apps: Introduction to the Web Speech API