Comment ajouter une fonctionnalité de synthèse vocale sur n'importe quelle page Web

le texte pour parler fonctionnalité se réfère à la narration parlée d'un texte affiché sur un appareil. Actuellement, des appareils tels que les ordinateurs portables, les tablettes et les téléphones mobiles déjà cette fonctionnalité. Toute application exécutée sur ces appareils, telle qu'un navigateur Web, peut en faire usage, et étendre ses fonctionnalités. La fonction de narration peut constituer une aide appropriée pour une application qui affiche beaucoup de texte, comme ca offre la possibilité d'écouter aux visiteurs du site.

L'API Web Speech

le API JavaScript Web Speech est la porte d'entrée accéder à la fonctionnalité de synthèse vocale par un navigateur Web. Ainsi, si vous souhaitez introduire la fonctionnalité de synthèse vocale sur une page Web contenant beaucoup de texte et permettre à vos lecteurs d’écouter le contenu, vous pouvez utiliser cette API très pratique, ou plus précisément sa Synthèse de discours interface.

Vérification initiale du code et du support

Pour commencer, créons une page Web avec moi exemple de texte à raconter, et trois boutons.

     
  Le lièvre avec beaucoup d'amis
  Un lièvre était très populaire avec… 
 Mais il a refusé, déclarant que… 
  Morale de l'histoire…

Les boutons seront les contrôles pour la narration. Maintenant, nous devons nous assurer que le UA soutient le Synthèse de discours interface. Pour ce faire, nous vérifions rapidement avec JavaScript si le la fenêtre objet a la 'synthèse de discours' propriété, ou pas.

 onload = function () if ('speechSynthesis' dans la fenêtre) / * synthèse vocale prise en charge * / else / * synthèse vocale non prise en charge * /

Si synthèse de discours est disponible, d'abord nous créer une référence pour synthèse de discours que nous attribuons à la synthé variable. Nous avons aussi initier un drapeau avec le faux valeur (nous verrons son but plus tard dans le post), et nous créer des références et cliquer sur des gestionnaires d'événements pour les trois boutons (Play, Pause, Stop) ainsi.

Lorsque l'utilisateur clique sur l'un des boutons, sa fonction respective (onClickPlay (), onClickPause (), onClickStop ()) sera appelé.

 if ('speechSynthesis' dans la fenêtre) var synth = speechSynthesis; var flag = false; / * références aux boutons * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * Cliquez sur les gestionnaires d'événements pour les boutons * / playEle.addEventListener ('click', onClickPlay); pauseEle.addEventListener ('click', onClickPause); stopEle.addEventListener ('click', onClickStop); fonction onClickPlay ()  fonction onClickPause ()  fonction onClickStop ()

Créer les fonctions personnalisées

Maintenant construire les fonctions de clic des trois boutons individuels qui seront appelés par les gestionnaires d'événements.

1. Jouer / Reprendre

Lorsque le bouton de lecture est cliqué, nous commençons par vérifier la drapeau. Si c'est faux, nous l'avons mis à vrai, donc, si vous cliquez ultérieurement sur le bouton, le code à l’intérieur du premier si la condition ne s'exécutera pas (pas avant que le drapeau soit faux encore).

Ensuite nous créer une nouvelle instance du SpeechSynthesisUtterance interface qui contient des informations sur la parole, comme le texte à lire, le volume de la parole, la voix parlée, la vitesse, la hauteur et la langue de la parole. Nous ajoutons le texte de l'article comme paramètre du constructeur, et l'assigner à la énonciation variable.

 fonction onClickPlay () if (! flag) flag = true; prononciation = new SpeechSynthesisUtterance (document.querySelector ('article'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (énonciation);  if (synth.paused) / * unpause / resume narration * / synth.resume ();

Nous utilisons le SpeechSynthesis.getVoices () méthode pour désigner une voix pour le discours parmi les voix disponibles sur le périphérique de l'utilisateur. Comme cette méthode renvoie un tableau de toutes les options de voix disponibles dans un périphérique, nous attribuer la première voix de périphérique disponible en utilisant le utterance.voice = synth.getVoices () [0]; déclaration.

le fin la propriété représente un gestionnaire d'événements qui est exécuté lorsque le discours est terminé. À l'intérieur de celui-ci, nous changeons la valeur de la drapeau variable retour à faux de sorte que le code qui commence le discours peut être exécuté quand le bouton est cliqué à nouveau.

Puis on appelle le SpeechSynthesis.speak () méthode pour commencer la narration. Nous devons aussi vérifier si la narration est en pause, pour lequel on utilise la lecture seule SpeechSynthesis.paused propriété. Si la narration est en pause, nous devons reprendre la narration sur le clic du bouton, que nous pouvons obtenir en utilisant le SpeechSynthesis.resume () méthode.

2. Pause

Créons maintenant le onClickPause () fonction dans laquelle nous vérifions d'abord si la narration est en cours et non en pause. Nous pouvons tester ces conditions en utilisant les SpeechSynthesis.speaking et le SpeechSynthesis.paused Propriétés. Si les deux conditions sont vraies, notre onClickPause () une fonction met le discours en pause en appelant le SpeechSynthesis.pause () méthode.

 function onClickPause () if (synth.speaking &&! synth.paused) / * mettre en pause la narration * / synth.pause ();

3. Stop

le onClickStop () la fonction est construit de manière similaire à onClickPause (). Si le discours est en cours, nous arrête ça en appelant le SpeechSynthesis.cancel () méthode qui enlève tous les énoncés.

 function onClickStop () if (synth.speaking) / * arrête la narration * / / * pour safari * / flag = false; synth.cancel ();

Notez que lors de l’annulation du discours, le fin l'événement est automatiquement déclenché, et nous avions déjà ajouté le code de réinitialisation du drapeau à l'intérieur. toutefois, il y a un bug dans le navigateur Safari qui empêche cet événement de tirer, c'est pourquoi nous avons réinitialisé le drapeau dans le onClickStop () une fonction. Vous n'êtes pas obligé de le faire si vous ne voulez pas supporter Safari.

Support du navigateur

Toutes les dernières versions des navigateurs modernes avoir un soutien total ou partiel pour l'API de synthèse vocale. Les navigateurs Webkit ne lisent pas la parole à partir de plusieurs onglets, la pause est un problème (fonctionne, mais), et la parole n'est pas réinitialisée lorsque l'utilisateur recharge la page dans les navigateurs Webkit..

Démo de travail

Regardez la démo en direct ci-dessous ou consultez le code complet sur Github..

Voir le stylo Ã ?? ° Ã… Â¸UNE¢Texte à Discuter - JavaScript par HONGKIAT (@hkdc) sur CodePen.