La API de síntesis de voz

La API de síntesis de voz es una API impresionante, ideal para experimentar nuevos tipos de interfaces y dejar que el navegador hable

La API de síntesis de voz es una herramienta increíble proporcionada por los navegadores modernos.

Introducido en 2014, ahora esampliamente adoptadoy disponible en Chrome, Firefox, Safari y Edge. IE no es compatible.

Browser support for the Speech Synthesis API

Es parte de la API Web Speech, junto con laAPI de reconocimiento de voz, aunque eso solo se admite actualmente, en modo experimental, en Chrome.

Lo usé recientemente para proporcionar una alerta en una página que monitoreaba algunos parámetros. Cuando subió uno de los números, me alertaron los altavoces de la computadora.

Empezando

El ejemplo más simple de usar elAPI de síntesis de vozpermanece en una línea:

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

Cópielo y péguelo en la consola de su navegador, ¡y su computadora debería hablar!

La API

La API expone varios objetos a lawindowobjeto.

SpeechSynthesisUtterance

SpeechSynthesisUtterancerepresenta una solicitud de voz. En el ejemplo anterior le pasamos una cadena. Ese es el mensaje que el navegador debería leer en voz alta.

Una vez que obtenga el objeto de expresión, puede realizar algunos ajustes para editar las propiedades del habla:

const utterance = new SpeechSynthesisUtterance('Hey')
  • utterance.rate: establece la velocidad, acepta entre [0,1 - 10], el valor predeterminado es 1
  • utterance.pitch: establece el tono, acepta entre [0 - 2], predeterminado en 1
  • utterance.volume: establece el volumen, acepta entre [0 - 1], predeterminado en 1
  • utterance.lang: establece el idioma (los valores usan una etiqueta de idioma BCP 47, comoen-USoit-IT)
  • utterance.text: en lugar de configurarlo en el constructor, puede pasarlo como una propiedad. El texto puede tener un máximo de 32767 caracteres
  • utterance.voice: establece la voz (más sobre esto a continuación)

Ejemplo:

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

Establecer una voz

El navegador tiene un número diferente de voces disponibles.

Para ver la lista, use este código:

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

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

Voices in Firefox

Este es uno de los problemas de varios navegadores. El código anterior funciona en Firefox, Safari (y posiblemente Edge, pero no lo probé), perono funciona en Chrome. Chrome requiere el manejo de las voces de una manera diferente y requiere una devolución de llamada que se llama cuando se han cargado las voces:

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

Después de llamar a la devolución de llamada, podemos acceder a la lista usandospeechSynthesis.getVoices().

Creo que esto se debe a que Chrome, si hay una conexión de red, verifica idiomas adicionales de los servidores de Google:

Chrome Languages

Si no hay conexión de red, la cantidad de idiomas disponibles es la misma que la de Firefox y Safari. Los idiomas adicionales están disponibles donde la red está habilitada, pero la API también funciona sin conexión.

Implementación de navegador cruzado para obtener el idioma

Dado que tenemos esta diferencia, necesitamos una forma de abstraerla para usar la API. Este ejemplo hace esta abstracción:

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()

Ver en Glitch

Usa un idioma personalizado

La voz predeterminada habla en inglés.

Puede usar cualquier idioma que desee, configurando la expresiónlangpropiedad:

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

Usa otra voz

Si hay más de una voz disponible, es posible que desee elegir la otra. Por ejemplo, la voz italiana predeterminada es femenina, pero tal vez quiera una voz masculina. Ese es el segundo que obtenemos de la lista de voces.

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’)

Ver en Glitch

Valores para el idioma

Estos son algunos ejemplos de los idiomas que puede utilizar:

  • Árabe (Arabia Saudita) ➡️ar-SA
  • Chino (China) ➡️zh-CN
  • Chino (RAE de Hong Kong, China) ➡️zh-HK
  • Chino (Taiwán) ➡️zh-TW
  • Checa (República Checa) ➡️cs-CZ
  • Danés (Dinamarca) ➡️da-DK
  • Holandés (Bélgica) ➡️nl-BE
  • Holandés (Países Bajos) ➡️nl-NL
  • Inglés (Australia) ➡️en-AU
  • Inglés (Irlanda) ➡️en-IE
  • Inglés (Sudáfrica) ➡️en-ZA
  • Inglés (Reino Unido) ➡️en-GB
  • Inglés (Estados Unidos) ➡️en-US
  • Finlandés (Finlandia) ➡️fi-FI
  • Francés (Canadá) ➡️fr-CA
  • Francés (Francia) ➡️fr-FR
  • Alemán (Alemania) ➡️de-DE
  • Griego (Grecia) ➡️el-GR
  • Hindi (India) ➡️hi-IN
  • Húngaro (Hungría) ➡️hu-HU
  • Indonesio (Indonesia) ➡️id-ID
  • Italiano (Italia) ➡️it-IT
  • Japonés (Japón) ➡️ja-JP
  • Coreano (Corea del Sur) ➡️ko-KR
  • Noruego (Noruega) ➡️no-NO
  • Polaco (Polonia) ➡️pl-PL
  • Portugués (Brasil) ➡️pt-BR
  • Portugués (Portugal) ➡️pt-PT
  • Rumano (Rumania) ➡️ro-RO
  • Ruso (Rusia) ➡️ru-RU
  • Eslovaco (Eslovaquia) ➡️sk-SK
  • Español (México) ➡️es-MX
  • Español (España) ➡️es-ES
  • Sueco (Suecia) ➡️sv-SE
  • Tailandés (Tailandia) ➡️th-TH
  • Turco (Turquía) ➡️tr-TR

Móvil

En iOS, la API funciona, pero debe activarse mediante una devolución de llamada de acción del usuario, como una respuesta a un evento de toque, para brindar una mejor experiencia a los usuarios y evitar sonidos inesperados en su teléfono.

No puede hacer Me gusta en el escritorio, donde puede hacer que sus páginas web digan algo inesperado.


Más tutoriales de navegador: