Reconnaissance vocale où comment rendre vos slides accessibles

Savez vous qu’il existe des API web permettant de jouer avec le micro de votre ordinateur au traver du navigateur web ? Le web posséde nativement plein d’outils très simples à utiliser et certains d’entre eux peuvent améliorer l’accessibilité de vos applications. Dans l’exemple d’aujourd’hui je vous partage un peu de code qui vous permettra d’ajouter la transcription de votre talk directement là où vous voulez. Personnellement j’utilise Reveal.js et je suis en train d’ajouter un petit bandeau en bas de slide qui retranscrira en direct ce que je dis : Parfait pour proposer un contenu pour le plus grand nombre.

Vous trouverez un exemple plus avancé réalisé par Thibaud Courtoison sur son repo github Lien vers le code source.

Ensuite si vous voulez vous amuser de votre coté vous trouverez toutes les informations importantes sur Developer Mozilla Dans la même veine que cette Api de reconnaissance vocale, il existe une Api de synthèse vocale idéale pour vous la jouer R2-D2 🤖.

<div>
  <p class="output"></p>
</div>

<script>
  var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
  var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;
  var SpeechRecognitionEvent =
    SpeechRecognitionEvent || webkitSpeechRecognitionEvent;

  var recognition = new SpeechRecognition();
  recognition.lang = "fr-FR"; // en français
  recognition.continous = true; // écoute continue
  recognition.interimResults = true; // recupère les résultats intermédiaires - réécriture à la volée des mots

  var output = document.querySelector(".output");

  recognition.addEventListener("result", (evt) => {
    const text = [...evt.results].map((r) => r[0].transcript).join("");
    output.textContent = text;
  });

  // fallback pour une écoute en continu
  recognition.addEventListener("end", () => recognition.start());

  recognition.start();
</script>