В 1968, 2001: Космическая Одиссея была выпущена. Это был знаменитый суперкомпьютер HAL 9000 , способный выполнять множество задач: распознавать лица, играть в шахматы и даже читать по губам. Но единственное, что застряло в сознании аудитории и с тех пор повлияло на все произведения научной фантастики, — это способность HAL говорить.
В наши дни компьютер, говорящий часть текста, переданного ему, является обычным делом. Однако только недавно вы смогли сделать это прямо в веб-браузере. Вот что я собираюсь показать вам в этом уроке.
API синтеза речи позволяет вам использовать JavaScript, чтобы взять фрагмент текста и вывести его на ваши докладчики в виде речи. Как и во всех новых API, он реализован не во всех браузерах, поэтому проверьте текущую поддержку на caniuse.com . На момент написания он поддерживается в Chrome и Safari, как для настольных компьютеров, так и для мобильных устройств.
Почему ты не поговоришь со мной?
Вы будете удивлены, насколько просто заставить ваш браузер начать общаться с вами. Для начала, либо создайте новый HTML-файл с тегом script, либо откройте консоль JavaScript вашего браузера. Затем внутри напишите следующую строку.
|
1
|
var utterance = new SpeechSynthesisUtterance();
|
То, что мы делаем здесь, — это создание нового экземпляра синтезированного высказывания. Думайте об этом как о маленьком конверте, который содержит инструкции, говорящие браузеру, что он должен сказать и как сказать это.
Во-первых, нам нужно придумать что-то чрезвычайно важное для нашего браузера.
|
1
|
utterance.text = ‘My name\’s Guybrush Threepwood, and I want to be a pirate!’;
|
Тогда мы готовы к работе. Давайте передадим наше сообщение синтезатору речи браузера и скажем, что он говорит. Не забудьте предварительно увеличить громкость на своем компьютере.
|
1
|
speechSynthesis.speak(utterance);
|
Вау, говорящий компьютер. Это так просто.
Изменение голоса
Теперь, если это было недостаточно впечатляюще, API синтеза речи предоставляет нам целый набор методов и атрибутов, которые мы можем использовать в нашем «высказывании» для настройки, чтобы изменить то, на что это похоже. Наиболее заметным из них является изменение речи человека. Ваша операционная система поставляется с множеством встроенных голосов на выбор, плюс ваш браузер добавляет несколько дополнительных для хорошей меры. Давайте посмотрим, какие голоса у нас есть в наличии.
|
1
2
3
|
speechSynthesis.getVoices().forEach(function(voice) {
console.log(‘Hi! My name is ‘, voice.name);
});
|
Если вы не видите выходных данных, возможно, вам придется снова запустить эту функцию. В Chrome есть странная ошибка, когда вам нужно запросить количество голосов дважды, чтобы правильно инициализировать. Чтобы преодолеть это, сделайте следующее.
|
1
2
3
4
5
6
7
8
9
|
// Tell Chrome to wake up and get the voices.
speechSynthesis.getVoices();
setTimeout(function () {
// After 1 second, get the voices now Chrome is listening.
speechSynthesis.getVoices().forEach(function (voice) {
console.log(‘Hi! My name is ‘, voice.name);
});
}, 1000);
|
Количество голосов варьируется от операционной системы к операционной системе, но на OS X у меня 74! Больше персонажей, чем эпизод Симпсонов. Давайте попробуем один.
Как вы, вероятно, можете видеть, speechSynthesis.getVoices() возвращает массив. Мы могли бы просто установить голос, выполнив:
|
1
|
utterance.voice = speechSynthesis.getVoices()[11];
|
Это скажет браузеру использовать «voice 11», который в моем случае — «Agnes». Бедная Агнес, уменьшенная до числа. Более хороший способ сделать это и рассматривать Агнесу как настоящего человека — это использовать метод findIndex из ECMAScript 6, который поддерживается в браузерах, которые также поддерживают API веб-синтеза, так что у нас все хорошо.
|
1
2
3
|
var agnesIndex = speechSynthesis.getVoices().findIndex(function (voice) {
return voice.name === ‘Agnes’;
});
|
Теперь, когда у нас есть индекс массива голосов, в котором находится голос Агнес, мы можем установить этот голос для использования в нашем высказывании.
|
1
2
3
|
utterance.voice = speechSynthesis.getVoices()[agnesIndex];
utterance.text = ‘It\’s me Agnes!
speechSynthesis.speak(utterance);
|
Нет проблем, Агнес. Ты напугал меня до полусмерти этим твоим громким голосом. Давай откажемся немного.
Объем, скорость и высота звука
К счастью, все, что нам нужно сделать, чтобы успокоить голос, это сказать:
|
1
|
utterance.volume = 0.5;
|
Это устанавливает громкость голоса Агнес на половину того, что было изначально: 0 — тишина, а 1 — самый громкий. Однако параметры, которые мы можем настроить, на этом не заканчиваются. Голос, который вы выбрали, говорит слишком медленно или слишком быстро? Вы можете изменить скорость, с которой голос считывает ваш фрагмент текста, используя атрибут скорости.
|
1
|
utterance.rate = 0.8;
|
Коэффициент по умолчанию, при котором говорит голос, равен 1. Так что здесь мы замедлили его на одну пятую. Самая низкая скорость, которую вы можете указать, равна 0,1, а самая быстрая — 10. Тембры также имеют свои собственные ограничения скорости, поэтому даже если вы установите скорость 10, она может не говорить в 10 раз быстрее, чем скорость по умолчанию.
Другой интересный параметр, который вы можете изменить, это высота звука. Хотите, чтобы Агнес звучала как Барри Уайт? Поле там, где оно есть.
|
1
|
utterance.pitch = 0.2;
|
Здесь самая низкая высота звука, которую вы можете установить, равна 0, а для того, чтобы ваш голос звучал так, как будто он только что вдохнул наполненного гелием бурундука, установите высоту звука 2, максимально возможную.
События
Хорошо, теперь давайте повеселимся. В API синтеза речи есть несколько различных событий, с которыми мы можем играть. Эти события, start , end , pause и resume среди других, позволяют нам вызывать функцию, когда происходит указанное событие. Прослушивая конечное событие, мы можем вызвать функцию, которая начинает говорить другим голосом, создавая иллюзию разговора.
Давайте создадим два разных голоса и предложим каждому из них сказать следующее. Помните, что весь ваш код должен быть в функции setTimeout чтобы убедиться, что все возможные голоса загружены.
|
1
2
3
4
5
6
7
8
9
|
var voices = window.speechSynthesis.getVoices(),
agnesUtterance = new SpeechSynthesisUtterance(),
albertUtterance = new SpeechSynthesisUtterance();
agnesUtterance.voice = voices[11];
albertUtterance.voice = voices[12];
agnesUtterance.text = ‘Hello Albert, I\’m Agnes’;
albertUtterance.text = ‘Hi Agnes, nice to meet you!’;
|
Прежде чем мы начнем говорить Агнес, в onend функции onend мы настраиваем ответ Альберта следующим образом. Это означает, что, когда Агнес перестает говорить, Альберт начнет.
|
1
2
3
|
agnesUtterance.onend = function () {
speechSynthesis.speak(albertUtterance);
}
|
Выглядит хорошо. Готовы услышать глубокий разговор? Запустите Агнес в обычном режиме.
|
1
|
speechSynthesis.speak(agnesUtterance);
|
Удивительный. Ваш браузер теперь говорит сам с собой. Скайнет стал самосознанием.