API синтеза речи

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

API синтеза речи - отличный инструмент, предоставляемый современными браузерами.

Представлен в 2014 году, сейчасшироко принятыйи доступен в Chrome, Firefox, Safari и Edge. IE не поддерживается.

Browser support for the Speech Synthesis API

Это часть Web Speech API вместе сAPI распознавания речи, хотя в настоящее время это поддерживается только в экспериментальном режиме в Chrome.

Я недавно использовал его, чтобы выдать предупреждение на странице, отслеживающей некоторые параметры. Когда одно из чисел выросло, меня насторожили динамики компьютера.

Начиная

Самый простой пример использованияAPI синтеза речиостается в одной строке:

speechSynthesis.speak(new SpeechSynthesisUtterance('Hey'))

Скопируйте и вставьте его в консоль браузера, и ваш компьютер должен заговорить!

API

API предоставляет доступ к нескольким объектамwindowобъект.

SpeechSynthesisUtterance

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

Получив объект высказывания, вы можете выполнить некоторые настройки для редактирования свойств речи:

const utterance = new SpeechSynthesisUtterance('Hey')
  • utterance.rate: установите скорость, принимает значение от [0,1 до 10], по умолчанию - 1
  • utterance.pitch: установка высоты звука, принимает значение от [0 - 2], по умолчанию - 1
  • utterance.volume: устанавливает громкость, принимает от [0 - 1], по умолчанию 1
  • utterance.lang: установить язык (значения используют языковой тег BCP 47, напримерen-USили жеit-IT)
  • utterance.text: вместо того, чтобы устанавливать его в конструкторе, вы можете передать его как свойство. Текст может содержать не более 32767 символов.
  • utterance.voice: устанавливает голос (подробнее об этом ниже)

Пример:

const utterance = new SpeechSynthesisUtterance('Hey')
utterance.pitch = 1.5
utterance.volume = 0.5
utterance.rate = 8
speechSynthesis.speak(utterance)

Установите голос

В браузере доступно другое количество голосов.

Чтобы увидеть список, используйте этот код:

console.log(`Voices #: ${speechSynthesis.getVoices().length}`)

speechSynthesis.getVoices().forEach(voice => { console.log(voice.name, voice.lang) })

Voices in Firefox

Вот одна из проблем кроссбраузерности. Приведенный выше код работает в Firefox, Safari (и, возможно, в Edge, но я его не тестировал), ноне работает в Chrome. Chrome требует обработки голосов по-другому и требует обратного вызова, который вызывается при загрузке голосов:

const voiceschanged = () => {
  console.log(`Voices #: ${speechSynthesis.getVoices().length}`)
  speechSynthesis.getVoices().forEach(voice => {
    console.log(voice.name, voice.lang)
  })
}
speechSynthesis.onvoiceschanged = voiceschanged

После вызова обратного вызова мы можем получить доступ к списку, используяspeechSynthesis.getVoices().

Я считаю, что это потому, что Chrome - если есть сетевое соединение - проверяет дополнительные языки с серверов Google:

Chrome Languages

Если нет сетевого подключения, количество доступных языков такое же, как в Firefox и Safari. Дополнительные языки доступны там, где сеть включена, но API также работает в автономном режиме.

Кроссбраузерная реализация для получения языка

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

const getVoices = () => {
  return new Promise(resolve => {
    let voices = speechSynthesis.getVoices()
    if (voices.length) {
      resolve(voices)
      return
    }
    speechSynthesis.onvoiceschanged = () => {
      voices = speechSynthesis.getVoices()
      resolve(voices)
    }
  })
}

const printVoicesList = async () => { ;(await getVoices()).forEach(voice => { console.log(voice.name, voice.lang) }) }

printVoicesList()

Смотрите на Glitch

Используйте собственный язык

Голос по умолчанию говорит по-английски.

Вы можете использовать любой язык, который хотите, установив произнесениеlangсвойство:

let utterance = new SpeechSynthesisUtterance('Ciao')
utterance.lang = 'it-IT'
speechSynthesis.speak(utterance)

Используйте другой голос

Если доступно более одного голоса, вы можете выбрать другой. Например, итальянский голос по умолчанию женский, но, возможно, мне нужен мужской голос. Это второй, который мы получаем из списка голосов.

const lang = 'it-IT'
const voiceIndex = 1

const speak = async text => { if (!speechSynthesis) { return } const message = new SpeechSynthesisUtterance(text) message.voice = await chooseVoice() speechSynthesis.speak(message) }

const getVoices = () => { return new Promise(resolve => { let voices = speechSynthesis.getVoices() if (voices.length) { resolve(voices) return } speechSynthesis.onvoiceschanged = () => { voices = speechSynthesis.getVoices() resolve(voices) } }) }

const chooseVoice = async () => { const voices = (await getVoices()).filter(voice => voice.lang == lang)

return new Promise(resolve => { resolve(voices[voiceIndex]) }) }

speak(‘Ciao’)

Смотрите на Glitch

Ценности для языка

Вот несколько примеров языков, которые вы можете использовать:

  • Арабский (Саудовская Аравия) ➡️ar-SA
  • Китайский (Китай) ➡️zh-CN
  • Китайский (САР Гонконг) ➡️zh-HK
  • Китайский (Тайвань) ➡️zh-TW
  • Чешский (Чехия) ➡️cs-CZ
  • Датский (Дания) ➡️da-DK
  • Голландский (Бельгия) ➡️nl-BE
  • Голландский (Нидерланды) ➡️nl-NL
  • Английский (Австралия) ➡️en-AU
  • Английский (Ирландия) ➡️en-IE
  • Английский (ЮАР) ➡️en-ZA
  • Английский (Великобритания) ➡️en-GB
  • Английский (США) ➡️en-US
  • Финский (Финляндия) ➡️fi-FI
  • Французский (Канада) ➡️fr-CA
  • Французский (Франция) ➡️fr-FR
  • Немецкий (Германия) ➡️de-DE
  • Греческий (Греция) ➡️el-GR
  • Хинди (Индия) ➡️hi-IN
  • Венгерский (Венгрия) ➡️hu-HU
  • Индонезийский (Индонезия) ➡️id-ID
  • Итальянский (Италия) ➡️it-IT
  • Японский (Япония) ➡️ja-JP
  • Корейский (Южная Корея) ➡️ko-KR
  • Норвежский (Норвегия) ➡️no-NO
  • Польский (Польша) ➡️pl-PL
  • Португальский (Бразилия) ➡️pt-BR
  • Португальский (Португалия) ➡️pt-PT
  • Румынский (Румыния) ➡️ro-RO
  • Русский (Россия) ➡️ru-RU
  • Словацкий (Словакия) ➡️sk-SK
  • Испанский (Мексика) ➡️es-MX
  • Испанский (Испания) ➡️es-ES
  • Шведский (Швеция) ➡️sv-SE
  • Тайский (Таиланд) ➡️th-TH
  • Турецкий (Турция) ➡️tr-TR

Мобильный

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

Вы не можете сделать так, как на рабочем столе, где вы можете заставить свои веб-страницы говорить что-то неожиданное.

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по браузеру: