Share
En 1968, 2001: Une odyssée de l'espace est sortie. Il présentait notamment HAL 9000, un supercalculateur capable d’un grand nombre de choses: reconnaissance faciale, jeu d’échecs et même lecture sur les lèvres. Mais la seule chose qui est restée gravée dans l’esprit du public et qui a influencé chaque recueil de science-fiction depuis, est la capacité de HAL à parler..
De nos jours, un ordinateur qui parle d’un texte qui lui est donné est devenu monnaie courante. Cependant, ce n'est que récemment que vous avez pu le faire directement dans un navigateur Web. C'est ce que je vais vous montrer dans ce tutoriel.
L'API Speech Synthesis vous permet d'utiliser JavaScript pour prendre un morceau de texte et le transmettre à vos haut-parleurs sous forme de parole. Comme pour toutes les nouvelles API, elle n'est pas implémentée dans tous les navigateurs. Consultez donc caniuse.com pour connaître le support actuel. Au moment de la rédaction, il est pris en charge par Chrome et Safari, aussi bien sur le bureau que sur mobile..
Vous serez surpris de voir à quel point il est simple de faire parler votre navigateur. Pour commencer, créez un nouveau fichier HTML contenant une balise de script ou ouvrez la console JavaScript de votre navigateur. Ensuite, à l'intérieur, écrivez la ligne suivante.
var énoncé = new SpeechSynthesisUtterance ();
Nous créons ici une nouvelle instance d'un énoncé synthétisé. Pensez à cela comme à une petite enveloppe contenant des instructions indiquant au navigateur ce qu'il doit dire et comment le dire..
Premièrement, nous devons penser à quelque chose d'extrêmement important pour notre navigateur.
utterance.text = 'Mon nom est Guybrush Threepwood, et je veux être un pirate!';
Ensuite, nous sommes prêts à partir. Donnons notre message au synthétiseur de parole du navigateur et disons-lui de parler. N'oubliez pas d'augmenter le volume de votre ordinateur au préalable.
speechSynthesis.speak (énonciation);
Wow, un ordinateur qui parle. Aussi facile que ça.
Maintenant, si cela n’était pas assez impressionnant, l’API Speech Synthesis nous fournit tout un tas de méthodes et d’attributs que nous pouvons utiliser dans notre énoncé pour peaufiner le rendu. Le plus notable d'entre eux est de changer la «personne» qui parle. Votre système d’exploitation comprend une variété de voix intégrées, et votre navigateur en ajoute quelques-unes supplémentaires pour vous donner une idée plus précise. Voyons quelles voix nous avons à notre disposition.
Accentsconagua
speechSynthesis.getVoices (). forEach (function (voice) console.log ('Bonjour! mon nom est', voice.name););Si vous ne voyez aucune sortie, vous devrez peut-être exécuter cette fonction à nouveau. Chrome a un bogue étrange dans lequel vous devez demander le nombre de voix deux fois pour qu'il s'initialise correctement. Pour surmonter cela, procédez comme suit.
// Dites à Chrome de se réveiller et d'obtenir les voix. speechSynthesis.getVoices (); setTimeout (function () // Après 1 seconde, récupérez les voix maintenant. Chrome écoute. speechSynthesis.getVoices (). forEach (function (voice) console.log ('Bonjour! mon nom est', voice.name); );, 1000);Le nombre de voix varie d'un système d'exploitation à l'autre, mais sur OS X, j'en ai 74! Plus de personnages qu'un épisode de The Simpsons. Essayons un.
Comme vous pouvez probablement le voir, speechSynthesis.getVoices () retourne un tableau. Nous pourrions simplement définir la voix en faisant:
utterance.voice = speechSynthesis.getVoices () [11];
Cela indiquerait au navigateur d’utiliser «la voix 11», qui dans mon cas est «Agnes». Pauvre Agnès, réduite à un nombre. Pour ce faire, et pour traiter Agnes comme un véritable être humain, utilisez la méthode ECMAScript 6. findIndex, qui est pris en charge dans les navigateurs qui prennent également en charge l'API Web Synthesis, de sorte que nous sommes tous bons.
var agnesIndex = speechSynthesis.getVoices (). findIndex (fonction (voix) return voice.name === 'Agnes';);
Maintenant que nous avons l'index du tableau de voix dans lequel se trouve la voix d'Agnès, nous pouvons configurer cette voix pour qu'elle soit utilisée par notre énoncé..
utterance.voice = speechSynthesis.getVoices () [agnesIndex]; utterance.text = 'C \' est moi, Agnes! Je suis vivant! Je vous remercie.'; speechSynthesis.speak (énonciation);
Pas de problème, Agnes. Tu m'as fait peur à moitié avec ta voix haute. Baissons un peu.
Heureusement, tout ce que nous avons à faire pour calmer la voix est de dire:
prononciation.volume = 0,5;
Cela règle le volume de la voix d'Agnès à la moitié de ce qu'il était à l'origine, 0 étant le silence et 1 le plus fort. Les paramètres que nous pouvons modifier ne s'arrêtent pas là, cependant. La voix que vous avez choisie parle-t-elle trop lentement ou trop rapidement? Vous pouvez modifier le débit de lecture du texte par la voix à l'aide de l'attribut rate.
taux d'énonciation = 0,8;
Le taux de défaut dans lequel une voix parle est de 1. Donc, ici, nous le ralentissons d’un cinquième. Le débit le plus lent que vous pouvez spécifier est 0,1, tandis que le plus rapide est 10. Les voix ont également leurs propres limites de débit. Ainsi, même si vous définissez un débit de 10, il risque de ne pas parler 10 fois plus vite que le débit par défaut..
Un autre paramètre intéressant que vous pouvez modifier est la hauteur. Voulez-vous que Agnes sonne comme Barry White? Le pitch est là.
énoncé.pitch = 0,2;
Le ton le plus bas que vous pouvez définir est 0, tandis que pour que votre voix sonne comme si vous aviez inhalé un tamia chargé d’hélium, définissez le ton sur 2, le niveau le plus élevé possible..
Ok, amusons-nous maintenant. L'API de synthèse vocale propose différents événements avec lesquels vous pouvez jouer. Ces événements, début, fin, pause, et CV entre autres, nous permettent d’appeler une fonction lorsque cet événement se produit. En écoutant l'événement final, nous pouvons appeler une fonction qui permet à une autre voix de parler, offrant ainsi l'illusion d'une conversation..
Mettons en place deux voix différentes et donnons à chacune une phrase à dire. Rappelez-vous, tout votre code devrait être dans la setTimeout fonction pour vous assurer que toutes les voix possibles ont été chargées.
var voix = window.speechSynthesis.getVoices (), agnesUtterance = new SpeechSynthesisUtterance (), albertUtterance = new SpeechSynthesisUtterance (); agnesUtterance.voice = voix [11]; albertUtterance.voice = voix [12]; agnesUtterance.text = 'Bonjour Albert, je suis Agnes'; albertUtterance.text = 'Bonjour Agnes, ravie de vous rencontrer!';
Avant de commencer Agnès à parler, dans le fin appel de fonction, nous établissons la réponse d’Albert comme telle. Cela signifie que quand Agnès cesse de parler, Albert commencera.
agnesUtterance.onend = function () speechSynthesis.speak (albertUtterance);
Cela semble bon. Prêt à entendre une conversation en profondeur? Démarrer Agnes comme d'habitude.
speechSynthesis.speak (agnesUtterance);
Incroyable. Votre navigateur parle maintenant à lui-même. Skynet est devenu conscient de soi.
