SpeechSynthesisUtterance

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2018.

Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

L'interface SpeechSynthesisUtterance de l'API Web Speech représente une requète de synthèse vocale. Elle contient le contenu du service permettant de définir la façon dont elle sera lu (langue, hauteur et volume).

Constructor

SpeechSynthesisUtterance.SpeechSynthesisUtterance(): Retourne une nouvelle instance de l'objet SpeechSynthesisUtterance.

Properties

SpeechSynthesisUtterance hérite également des propriétés de son interface parente, EventTarget.

SpeechSynthesisUtterance.lang: Gets and sets the language of the utterance.
SpeechSynthesisUtterance.pitch: Gets and sets the pitch at which the utterance will be spoken at.
SpeechSynthesisUtterance.rate: Gets and sets the speed at which the utterance will be spoken at.
SpeechSynthesisUtterance.text: Gets and sets the text that will be synthesised when the utterance is spoken.
SpeechSynthesisUtterance.voice: Gets and sets the voice that will be used to speak the utterance.
SpeechSynthesisUtterance.volume: Gets and sets the volume that the utterance will be spoken at.

Event handlers

SpeechSynthesisUtterance.onboundary: Fired when the spoken utterance reaches a word or sentence boundary.
SpeechSynthesisUtterance.onend: Fired when the utterance has finished being spoken.
SpeechSynthesisUtterance.onerror: Fired when an error occurs that prevents the utterance from being succesfully spoken.
SpeechSynthesisUtterance.onmark: Fired when the spoken utterance reaches a named SSML "mark" tag.
SpeechSynthesisUtterance.onpause: Fired when the utterance is paused part way through.
SpeechSynthesisUtterance.onresume: Fired when a paused utterance is resumed.
SpeechSynthesisUtterance.onstart: Fired when the utterance has begun to be spoken.

Examples

Dans notre exemple basique de démonstration de synthèse vocale, nous commençons par récupérer une référence du controller SpeechSynthesis en utilisant window.speechSynthesis. Après avoir définit les variables nécessaires, nous récupérons une liste des voix disponibles en utilisant SpeechSynthesis.getVoices() puis nous alimentons un menu avec celle-ci. L'utilisateur pourra ensuite choisir la voix qu'il souhaite.

À l'intérieur du handler inputForm.onsubmit :

Nous stoppons la soumission du formulaire avec preventDefault();
Nous utilisons le constructeur constructor pour créer une nouvelle instance contenant le texte de l'<input>;
Nous positionnons voice sur la voix sélectionnée dans le <select>;
Nous démarrons la synthèse vocale via la méthode SpeechSynthesis.speak()

var synth = window.speechSynthesis;

var inputForm = document.querySelector("form");
var inputTxt = document.querySelector("input");
var voiceSelect = document.querySelector("select");

var voices = synth.getVoices();

for (i = 0; i < voices.length; i++) {
  var option = document.createElement("option");
  option.textContent = voices[i].name + " (" + voices[i].lang + ")";
  option.setAttribute("data-lang", voices[i].lang);
  option.setAttribute("data-name", voices[i].name);
  voiceSelect.appendChild(option);
}

inputForm.onsubmit = function (event) {
  event.preventDefault();

  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  var selectedOption = voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  synth.speak(utterThis);
  inputTxt.blur();
};

Spécifications

Specification
Web Speech API # speechsynthesisutterance

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

Web Speech API