Home
JavaScript
tools

Créons un convertisseur de voix en texte avec HTML et javaScript

Créons un convertisseur de voix en texte avec HTML et javaScript

Salut les magiciens du code ! Aujourd'hui, on va transformer votre navigateur en scribe personnel grâce au pouvoir mystique de l'API Web Speech. Préparez vos incantations (et votre clavier), on va faire parler le JavaScript ! 🧙‍♂️

L'API Web Speech : Quand votre navigateur devient bilingue

Avant de commencer, petite info pour briller en société : l'API Web Speech, c'est comme avoir un interprète dans votre navigateur. Elle se compose de deux parties :

  • SpeechSynthesis : Le Text-to-Speech, pour faire parler votre navigateur (pratique pour imiter Dark Vador).
  • SpeechRecognition : La reconnaissance vocale asynchrone, pour que votre navigateur vous comprenne (même avec votre accent du Sud).

Aujourd'hui, on va se concentrer sur la partie SpeechRecognition. Accrochez-vous, ça va décoiffer ! 🌪️

Le HTML : La scène de notre spectacle vocal

Commençons par le HTML. C'est simple, on a juste besoin d'un bouton pour démarrer l'enregistrement et d'un endroit pour afficher le texte transcrit :


<h2>Reconnaissance Vocale</h2>
<p id="transcription"></p>
<button id="startRecognitionButton">Enregistrer</button>

Info de ouf : Ce HTML est tellement simple qu'il pourrait presque passer pour du minimalisme scandinave. IKEA, sors de ce corps !

Le JavaScript : Où la magie opère

Maintenant, passons aux choses sérieuses. Voici le code JavaScript qui va transformer votre navigateur en scribe 2.0 :


const startRecognitionButton = document.getElementById("startRecognitionButton");
const transcription = document.getElementById("transcription");

startRecognitionButton.addEventListener("click", function () {
  const recognition = new webkitSpeechRecognition();
  recognition.lang = "fr-FR"; // Parce qu'on est fiers d'être Français, nom d'une pipe !
  
  recognition.onresult = function (event) {
    const transcript = event.results[0][0].transcript;
    transcription.textContent = transcript;
  };
  
  recognition.onerror = function (event) {
    console.error("Oups, une erreur :", event.error);
  };
  
  recognition.start();
});

Décortiquons ce code comme si c'était une grenouille en cours de SVT (mais en plus fun) :

  1. On récupère notre bouton et notre zone de texte avec getElementById. Classique, comme une baguette bien cuite.
  2. On ajoute un écouteur d'événements sur le bouton. Quand on clique, ça déclenche notre magie noire.
  3. On crée une nouvelle instance de webkitSpeechRecognition. C'est notre baguette magique pour la reconnaissance vocale.
  4. On définit la langue sur le français, parce qu'on n'est pas des sauvages.
  5. Quand la reconnaissance donne un résultat, on l'affiche dans notre zone de texte. Tadaaa !
  6. Si une erreur survient, on l'affiche dans la console. Parce que debugger, c'est la vie.
  7. Enfin, on lance la reconnaissance vocale avec recognition.start(). Que le spectacle commence !

Attention : Ce code pourrait vous donner envie de parler à votre ordinateur toute la journée. Votre entourage pourrait vous prendre pour un fou. Mais bon, c'est le prix de l'innovation, non ?

Conclusion : Vous êtes maintenant un magicien des mots

Et voilà ! Avec ce petit bout de code, vous pouvez maintenant transformer la parole en texte comme par magie. C'est pratique pour prendre des notes vocales, commander votre ordinateur à la voix, ou juste pour impressionner vos amis lors de votre prochaine soirée geek.

N'oubliez pas que cette API est encore expérimentale sur certains navigateurs. Donc si ça ne marche pas, ce n'est pas vous, c'est eux. Promis.

Maintenant, à vous de jouer ! Créez des applications vocales révolutionnaires, dictez vos mémoires, ou utilisez-le pour noter vos idées de blagues nulles. Le pouvoir est entre vos mains (et votre bouche) ! 🎤✨

Sur ce, je retourne bosser sur mon prochain projet : un traducteur voix-à-emoji. Parce que pourquoi pas ? 😎🚀

Commentaires

  • A+
  • A-