Fonction de synthèse vocale HTML5 peu connue

Si vous l'écoutez, vous constaterez que le son joué n'est pas un matériel audio préenregistré, mais un discours synthétisé grâce à la reconnaissance de texte.

Veuillez d'abord mettre vos écouteurs, puis copier le code suivant dans la console Chrome pour en faire l'expérience ~

 let msg = new SpeechSynthesisUtterance(Bienvenue pour lire mon blog);window.speechSynthesis.speak(msg);

Écoutez, ce n'est pas difficile d'implémenter la synthèse vocale sur le front-end

À partir de l’exemple ci-dessus, nous pouvons deviner les fonctions des deux méthodes appelées ci-dessus.

 SpeechSyntehesisUtterancwindow.speechSynthesis.speak

Bien entendu, la synthèse vocale n’inclut pas que ces deux API, mais commençons d’abord par ces deux points.

Référence : Developer.mozilla.org/en-US/docs/… L'objet SpeechSyntehesisUtteranc contient le contenu à lire par le service vocal et certains paramètres, tels que la langue, la hauteur et le volume.

 SpeechSyntehesisUtteranc()SpeechSynthesisUtterance.langSpeechSynthesisUtterance.pitchSpeechSynthesisUtterance.rateSpeechSynthesisUtterance.voiceSpeechSynthesisUtterance.volume

Remarque : Les propriétés ci-dessus sont toutes lisibles et inscriptibles ! Vous pouvez copier le code ci-dessous et l'essayer. Il y aura des instructions dans les commentaires.

 let msg = new SpeechSynthesisUtterance();msg.text = comment allez-vous // Texte à synthétiser msg.lang = en-US // Prononciation de l'anglais américain (automatiquement sélectionnée par défaut) msg.rate = 2 // Double vitesse (par défaut est 1, plage 0,1 ~ 10) msg.pitch = 2 // Hauteur aiguë (plus le nombre est grand, plus la valeur par défaut est 1, plage 0 ~ 2) msg.volume = 0,5 // Volume 0,5 fois (la valeur par défaut est 1, plage 0 ~ 1) window.speechSynthesis.speak(msg);

Parallèlement, cet objet peut également répondre à une série d'événements, qui peuvent être utilisés :

• commencer
• fin
• limite
• pause
• CV

Avec l'aide de ces événements, nous pouvons accomplir quelques fonctions simples, comme compter le nombre de mots dans des phrases anglaises :

 let count = 0; // Nombre de mots let msg = new SpeechSynthesisUtterance(); let synth = window.speechSynthesis;msg.addEventListener('start',()=>{ // Commencez à lire console.log(`Contenu du texte : $ {msg.text}`); console.log(start);});msg.addEventListener('end',()=>{ // Fin de la lecture console.log(end); console.log(`Nombre de mots de texte (mots) : ${count}`); count = 0;});msg.addEventListener('boundary',()=>{ // Compter les mots compte++;});

Après avoir essayé, comme le chinois n'utilise pas d'espaces pour séparer chaque mot, il sera automatiquement reconnu. Par exemple, bienvenue aux lecteurs sera reconnu comme deux mots : bienvenue et lecteur.

Référence : Developer.mozilla.org/en-US/docs/…

Après avoir parlé de SpeechSyntehesisUtteranc, intéressons-nous à SpeechSynthesis

La fonction principale de SpeechSynthesis est d'effectuer une série de contrôles sur la parole, tels que le démarrage ou la pause.

Il possède trois propriétés en lecture seule qui indiquent l'état de la voix :

 SpeechSynthesis.pausedSpeechSynthesis.en attente

Il existe également une série de méthodes pour manipuler la parole :

•SpeechSynthesis.speak() commence à lire la parole et déclenche l'événement de démarrage en même temps

•SpeechSynthesis.pause() met en pause et déclenche l'événement pause

•SpeechSynthesis.resume() continue et déclenche l'événement de reprise en même temps

•SpeechSynthesis.cancel() annule la lecture et déclenche l'événement de fin en même temps

Sur la base de ces méthodes de fonctionnement, nous pouvons encore améliorer notre lecteur de texte :

Revenons au point de départ initial. Sur la base du contenu ci-dessus, nous pouvons deviner comment la lecture automatique des articles est mise en œuvre sur certains sites Web.

Si le front-end de ce site Web utilise le framework MVVM (prenons Vue comme exemple), alors le contenu de l'article peut être stocké dans des données, qui peuvent être utilisées pour construire la synthèse vocale dont nous avons besoin.

Bien entendu, il est également possible que l'article soit obtenu via une requête ajax, que les données demandées soient analysées et que l'objet de synthèse vocale soit construit.

Si l'article est écrit directement en HTML, le DOM doit être analysé à ce moment-là, même la structure chaotique suivante.

 <div id=test> <p>1</p> <p>2</p> <ul> <li>3</li> <li>4</li> </ul> <table> <tr > <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </table> <img src=https://www.baidu.com/img/bd_logo1.png 9</div>

Lisez le texte directement via innerText, puis construisez un objet de synthèse vocale, et vous pourrez également le lire dans l'ordre souhaité (les images seront ignorées)

Bien sûr, si nous voulons ignorer certaines structures spéciales, telles que les tableaux, nous pouvons consacrer un peu d’énergie à l’analyse et au filtrage des données ou des éléments DOM dont nous ne voulons pas.

Quoi qu'il en soit, nous pouvons trouver une solution adaptée~

Cette fonctionnalité est encore en projet et n’est pas largement prise en charge.

Encore une fois, cette API ne peut pas encore être appliquée aux environnements de production.

L'approche la plus courante à l'heure actuelle consiste à construire une API qui synthétise le texte dans un fichier vocal sur le back-end (peut-être une API tierce), puis à le lire en tant que média sur le front-end.

Une fois, alors que j'étais confus, j'ai lu des articles d'experts et lu quelques réflexions de haut niveau sur le développement front-end. Une chose m'a profondément impressionné :

L'avant est le plus proche de l'utilisateur. Tout doit être considéré du point de vue de l'utilisateur. L'utilisation sans obstacle est également une question très importante. Bien que les avantages apportés par une telle fonction soient bien moindres que ceux d'autres entreprises, afin que le produit serve mieux les utilisateurs, il vaut la peine de travailler davantage. C'est aussi un esprit de développement front-end.

Ce qui précède est la fonction de synthèse vocale HTML5 peu connue introduite par l'éditeur. J'espère qu'elle vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps !