Mon ordinateur raconte des blagues en anglais

Il existe une fonctionnalité native dans les navigateurs moderne qui permet de transcrire du texte en voix.

Je trouve cela assez dingue !

Même si la voix est robotique, on peut très simplement réaliser une transcription « text to speech » en quelques lignes de code javascript.

C’est alors que j’ai décidé de réaliser un petit site qui raconte des blagues.

Bon au début je voulais que site raconte des blagues en français, mais je n’ai pas trouvé d’API ne nécessitant pas d’authentification permettant de récupérer des blagues en français.

Alors j’aurais pu faire ma propre liste de blagues, comme je l’ai fait pour le générateur de citation, mais je ne connais pas de blagues, et je ne voulais pas passer une nuit blanche à créé une base de données de blagues.

Et j’ai surtout trouvé une API qui permet de faire des blagues thématiques ne nécessitant pas d’authentification. C’est un point important pour moi, car si je veux faire des tests, je trouve cela embêtant de devoir m’inscrire sur un site pour pouvoir obtenir un apiKey.

En plus si je veux partager le code, je dois mettre en œuvre un système permettant de ne pas partager l’apiKey.

Bon le problème de l’API qui fait des blagues, c’est qu’elle n’a pas de blagues en français. Mais vu qu’il y a des thématiques, j’ai choisi des blagues sur l’informatique, et le résultat est plutôt sympa.

Voici le lien vers l’API dont je vous parle : https://sv443.net/jokeapi/v2/

Bon maintenant voici le site que j’ai mis en œuvre : https://smartful.github.io/joke-teller/

Et oui, c’est très simple ! On appui sur un bouton, et puis on écoute une blague en anglais. Et c’est plutôt rigolo !

Je vais vous laissez le soin de découvrir le code dans son intégralité sur Github : https://github.com/smartful/joke-teller

Je vais par contre prendre le soin de vous expliquer la partie selon moi la plus spectaculaire : « Text To Speech« .

En gros on récupère la blague sur l’API sous la forme d’un objet JavaScript, et le texte se trouve dans le nœud joke. Et la partie « Text To Speech » se trouve dans la fonction tellMe() :

tellMe(data.joke);

Et voici le descriptif de la fonction tellMe() :

function tellMe(joke) {
  const speech = new SpeechSynthesisUtterance();
  speech.lang = 'en-US';
  speech.text = joke;
  window.speechSynthesis.speak(speech);
}

Et voilà ! C’est aussi simple !

On a 2 fonctionnalités JS qui sont :

  • SpeechSynthesisUtterance()
  • speechSynthesis

SpeechSynthesisUtterance() nous permet de définir des options tel que la langue, mais aussi la rapidité, le ton, … (je vous laisse parcourir la documentation pour en savoir plus : https://developer.mozilla.org/fr/docs/Web/API/SpeechSynthesisUtterance) et de rattacher notre texte à cette fonctionnalité.

Et speechSynthesis est la fonctionnalité rattachée à la racine (window est la racine où sont rattachées les fonctionnalité de base de JavaScript), nous permet de lancer la méthode speak() (parler en anglais, en j’imagine que vous aviez compris) qui reçoit en paramètre notre instance de SpeechSynthesisUtterance().

Pour marque-pages : Permaliens.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *