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

La fonction de synthèse vocale fait référence à la narration parlée d'un texte affiché sur un périphérique. À l'heure actuelle, les appareils tels que les ordinateurs portables, les tablettes et les téléphones mobiles ont déjà cette fonctionnalité . Toute application exécutée sur ces périphériques, telle qu'un navigateur Web, peut en faire usage et étendre ses fonctionnalités . La fonctionnalité de narration peut être une aide appropriée pour une application qui affiche un texte abondant, car elle offre la possibilité d'écouter les visiteurs du site.

L'API Web Speech

L' API Web Speech JavaScript est la passerelle permettant d' accéder à la fonctionnalité Text-to-Speech par un navigateur Web . Ainsi, si vous souhaitez introduire la fonctionnalité de synthèse vocale sur une page Web avec du texte et permettre à vos lecteurs d'écouter le contenu, vous pouvez utiliser cette API pratique ou, pour être plus précis, son interface SpeechSynthesis . .

Code initial et vérification du support

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

 Le lièvre avec de nombreux 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 l' UA supporte l'interface SpeechSynthesis . Pour ce faire, nous vérifions rapidement avec JavaScript si l' objet window a la propriété 'speechSynthesis' ou non.

 onload = function () {if ('speechSynthesis' dans la fenêtre) {/ * synthèse vocale supportée * /} else {/ * synthèse vocale non supportée * /}} 

Si speechSynthesis est disponible, nous créons d'abord une référence pour la speechSynthesis de la speechSynthesis que nous speechSynthesis à la variable synth . Nous lançons également un drapeau avec la valeur false (nous verrons son but plus tard dans la publication), et nous créons des références et cliquons sur les gestionnaires d'événements pour les trois boutons (Lecture, Pause, Stop).

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

 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); function onClickPlay () {} fonction onClickPause () {} fonction onClickStop () {}} 

Créer les fonctions personnalisées

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

1. Jouer / Reprendre

Lorsque vous cliquez sur le bouton Lecture, nous vérifions d'abord le flag . Si c'est false, nous le mettons à true, donc si à chaque fois que le bouton est cliqué plus tard, le code à l'intérieur de la première condition if ne s'exécutera pas (pas jusqu'à ce que l'indicateur soit à nouveau false ).

Ensuite, nous créons une nouvelle instance de l' interface SpeechSynthesisUtterance qui contient des informations sur le discours, comme, le texte à lire, le volume de la parole, la voix parlée, la vitesse, la hauteur et la langue du discours. Nous ajoutons le texte de l'article en tant que paramètre du constructeur et l'affectons à la variable d' utterance .

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

Nous utilisons la méthode SpeechSynthesis.getVoices() pour désigner une voix pour le discours à partir des voix disponibles dans l'appareil de l'utilisateur. Comme cette méthode renvoie un tableau de toutes les options vocales disponibles dans un périphérique, nous attribuons la première voix de périphérique disponible à l'aide de la commande utterance.voice = synth.getVoices()[0]; déclaration.

La propriété onend représente un gestionnaire d'événements qui est exécuté lorsque le discours est terminé . A l'intérieur, nous changeons la valeur de la variable flag en false pour que le code qui démarre le discours puisse être exécuté lorsque le bouton est de nouveau cliqué .

Ensuite, nous appelons la méthode SpeechSynthesis.speak() afin de démarrer la narration . Nous devons également vérifier si la narration est en pause, pour laquelle nous utilisons la propriété SpeechSynthesis.paused lecture seule. Si la narration est en pause, nous devons reprendre la narration en cliquant sur le bouton, ce que nous pouvons faire en utilisant la méthode SpeechSynthesis.resume() .

2. Pause

Maintenant, créons la fonction onClickPause() 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 SpeechSynthesis.paused . Si les deux conditions sont remplies, notre fonction onClickPause() met le discours en pause en appelant la méthode SpeechSynthesis.pause() .

 function onClickPause () {if (synthétiseur &&! synth.paused) {/ * pause narration * / synth.pause (); }} 

3. Arrêtez

La fonction onClickStop() est similaire à onClickPause() . Si le discours est en cours, nous l' arrêtons en appelant la méthode SpeechSynthesis.cancel() qui supprime 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 de la parole, l' événement onend est automatiquement déclenché et nous avons déjà ajouté le code de réinitialisation de l'indicateur à l'intérieur de celui-ci. Cependant, il y a un bug dans le navigateur Safari qui empêche le déclenchement de cet événement, c'est pourquoi nous avons réinstallé l'indicateur dans la fonction onClickStop() . Vous n'êtes pas obligé de le faire si vous ne voulez pas prendre en charge Safari.

Support du navigateur

Toutes les dernières versions des navigateurs modernes supportent totalement ou partiellement l'API de synthèse vocale. Les navigateurs Webkit ne lisent pas la voix à partir de plusieurs onglets, la mise en pause est buguée (fonctionne mais buggée) et la voix n'est pas réinitialisée lorsque l'utilisateur recharge la page dans les navigateurs Webkit.

Démonstration de travail

Jetez un oeil à la démo en direct ci-dessous, ou consultez le code complet sur Github.

Voyez le stylo à ...                              Texte à parole - JavaScript par HONGKIAT (@hkdc) sur CodePen.

Flotteurs CSS expliqués en 5 questions

Les "Floats" CSS (éléments flottants) sont simples à utiliser mais une fois utilisés, l'effet qu'ils ont sur les éléments qui les entourent devient parfois imprévisible. Si vous avez déjà rencontré le problème de la disparition des éléments à proximité ou des flotteurs qui poussent comme un pouce endolori, ne vous inquiétez plus.Ce billet couvr

(Conseils techniques et de conception)

Meet Yarn: le plus récent gestionnaire de paquets JavaScript développé par Facebook

La plupart des développeurs frontend connaissent déjà npm, qui est le gestionnaire de paquets alimenté par Node pour les bibliothèques JavaScript, les frameworks et les plugins. C'est le gestionnaire de paquets le plus utilisé par les développeurs web, mais Facebook a mis au point un nouveau gestionnaire de paquets nommé Yarn qui devient rapidement le rival de npm .Avec Ya

(Conseils techniques et de conception)