L'API de synthèse vocale

L'API Speech Synthesis est une API géniale, idéale pour expérimenter de nouveaux types d'interfaces et laisser le navigateur vous parler

L'API de synthèse vocale est un outil génial fourni par les navigateurs modernes.

Introduit en 2014, il est maintenantlargement adoptéeet disponible dans Chrome, Firefox, Safari et Edge. IE n'est pas pris en charge.

Browser support for the Speech Synthesis API

Il fait partie de l'API Web Speech, avec leAPI de reconnaissance vocale, bien que cela ne soit actuellement pris en charge, en mode expérimental, que sur Chrome.

Je l'ai utilisé récemment pour fournir une alerte sur une page qui surveillait certains paramètres. Lorsque l'un des chiffres a augmenté, j'ai été alerté par les haut-parleurs de l'ordinateur.

Commencer

L'exemple le plus simple d'utilisation duAPI de synthèse vocalereste sur une seule ligne:

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

Copiez-le et collez-le dans la console de votre navigateur, et votre ordinateur devrait parler!

L'API

L'API expose plusieurs objets auwindowobjet.

`SpeechSynthesisUtterance`

SpeechSynthesisUtterancereprésente une demande de parole. Dans l'exemple ci-dessus, nous lui avons passé une chaîne. C'est le message que le navigateur doit lire à haute voix.

Une fois que vous avez obtenu l'objet d'énoncé, vous pouvez effectuer quelques ajustements pour modifier les propriétés vocales:

const utterance = new SpeechSynthesisUtterance('Hey')

utterance.rate: règle la vitesse, accepte entre [0,1 - 10], la valeur par défaut est 1
utterance.pitch: règle la hauteur, accepte entre [0 - 2], la valeur par défaut est 1
utterance.volume: règle le volume, accepte entre [0 - 1], la valeur par défaut est 1
utterance.lang: définissez la langue (les valeurs utilisent une balise de langue BCP 47, commeen-USouit-IT)
utterance.text: au lieu de le définir dans le constructeur, vous pouvez le passer en tant que propriété. Le texte peut comporter au maximum 32767 caractères
utterance.voice: définit la voix (plus à ce sujet ci-dessous)

Exemple:

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

Définir une voix

Le navigateur a un nombre différent de voix disponibles.

Pour voir la liste, utilisez ce code:

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

Voices in Firefox

Voici l'un des problèmes liés à plusieurs navigateurs. Le code ci-dessus fonctionne dans Firefox, Safari (et peut-être Edge mais je ne l'ai pas testé), maisne fonctionne pas dans Chrome. Chrome nécessite la gestion des voix d'une manière différente et nécessite un rappel qui est appelé lorsque les voix ont été chargées:

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

Une fois le rappel appelé, nous pouvons accéder à la liste en utilisantspeechSynthesis.getVoices().

Je pense que c'est parce que Chrome - s'il y a une connexion réseau - vérifie les langues supplémentaires des serveurs Google:

Chrome Languages

S'il n'y a pas de connexion réseau, le nombre de langues disponibles est le même que Firefox et Safari. Les langues supplémentaires sont disponibles là où le réseau est activé, mais l'API fonctionne également hors ligne.

Implémentation de plusieurs navigateurs pour obtenir la langue

Puisque nous avons cette différence, nous avons besoin d'un moyen de l'abstraire pour utiliser l'API. Cet exemple fait cette abstraction:

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

Voir sur Glitch

Utilisez une langue personnalisée

La voix par défaut parle en anglais.

Vous pouvez utiliser la langue de votre choix, en définissant l'énoncélangbiens:

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

Utiliser une autre voix

S'il y a plus d'une voix disponible, vous pouvez choisir l'autre. Par exemple, la voix italienne par défaut est féminine, mais peut-être que je veux une voix masculine. C'est le deuxième que nous obtenons de la liste des voix.

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

Voir sur Glitch

Valeurs pour la langue

Voici quelques exemples de langues que vous pouvez utiliser:

Arabe (Arabie Saoudite) ➡️ar-SA
Chinois (Chine) ➡️zh-CN
Chinois (RAS de Hong Kong Chine) ➡️zh-HK
Chinois (Taiwan) ➡️zh-TW
Tchèque (République tchèque) ➡️cs-CZ
Danois (Danemark) ➡️da-DK
Néerlandais (Belgique) ➡️nl-BE
Néerlandais (Pays-Bas) ➡️nl-NL
Anglais (Australie) ➡️en-AU
Anglais (Irlande) ➡️en-IE
Anglais (Afrique du Sud) ➡️en-ZA
Anglais (Royaume-Uni) ➡️en-GB
Anglais (États-Unis) ➡️en-US
Finnois (Finlande) ➡️fi-FI
Français (Canada) ➡️fr-CA
Français (France) ➡️fr-FR
Allemand (Allemagne) ➡️de-DE
Grec (Grèce) ➡️el-GR
Hindi (Inde) ➡️hi-IN
Hongrois (Hongrie) ➡️hu-HU
Indonésien (Indonésie) ➡️id-ID
Italien (Italie) ➡️it-IT
Japonais (Japon) ➡️ja-JP
Coréen (Corée du Sud) ➡️ko-KR
Norvégien (Norvège) ➡️no-NO
Polonais (Pologne) ➡️pl-PL
Portugais (Brésil) ➡️pt-BR
Portugais (Portugal) ➡️pt-PT
Roumain (Roumanie) ➡️ro-RO
Russe (Russie) ➡️ru-RU
Slovaque (Slovaquie) ➡️sk-SK
Espagnol (Mexique) ➡️es-MX
Espagnol (Espagne) ➡️es-ES
Suédois (Suède) ➡️sv-SE
Thaï (Thaïlande) ➡️th-TH
Turc (Turquie) ➡️tr-TR

Mobile

Sur iOS, l'API fonctionne mais doit être déclenchée par un rappel d'action de l'utilisateur, comme une réponse à un événement tap, pour offrir une meilleure expérience aux utilisateurs et éviter les sons inattendus de votre téléphone.

Vous ne pouvez pas faire comme sur le bureau où vous pouvez faire en sorte que vos pages Web parlent à l'improviste.

Téléchargez mon gratuitManuel du débutant JavaScript