Веб-приложения, которые говорят: введение в API синтеза речи

Web Speech API добавляет в JavaScript распознавание голоса (речь в текст) и синтез речи (текст в речь). В посте кратко рассматривается последнее, поскольку API недавно появился в Chrome 33 (мобильный и настольный). Если вас интересует распознавание речи, Глен Шайрс недавно написал отличную статью о функции распознавания голоса « Веб-приложения, управляемые голосом: введение в API веб-речи ».

Основы

Самое простое использование API синтеза — передача speechSynthesis.speak() и utterance:

var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);

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

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'Hello World';
msg.lang = 'en-US';

msg.onend = function(e) {
    console.log('Finished in ' + event.elapsedTime + ' seconds.');
};

speechSynthesis.speak(msg);

Настройка голоса

API также позволяет получить список голосов, которые поддерживает движок:

speechSynthesis.getVoices().forEach(function(voice) {
    console.log(voice.name, voice.default ? voice.default :'');
});

Затем установите другой голос, установив .voice для объекта высказывания:

var msg = new SpeechSynthesisUtterance('I see dead people!');
msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Whisper'; })[0];
speechSynthesis.speak(msg);

Демо

В своем выступлении на Google I/O 2013 « Более удивительный Интернет: функции, которые вы всегда хотели » ( www.moreawesomeweb.com ) я показал демонстрацию в стиле Google Now/Siri, в которой показано использование службы SpeechRecognition API Web Speech API с Google. Переведите API для автоматического перевода ввода с микрофона на другой язык:

ДЕМО: http://www.moreawesomeweb.com/demos/speech_translate.html

К сожалению, для синтеза речи он использовал недокументированный (и неофициальный API). Что ж, теперь у нас есть полноценный API веб-речи для озвучивания перевода! Я обновил демо-версию , чтобы использовать API синтеза.

Поддержка браузера

Chrome 33 имеет полную поддержку Web Speech API, а Safari для iOS7 — частичную.

Обнаружение функций

Поскольку браузеры могут поддерживать каждую часть Web Speech API отдельно (например, в случае с Chromium), вы можете захотеть определять каждую функцию отдельно:

if ('speechSynthesis' in window) {
    // Synthesis support. Make your web apps talk!
}

if ('SpeechRecognition' in window) {
    // Speech recognition support. Talk to your apps!
}