Pages Web parlantes et API de synthèse de la parole

Points de base

• L'API de synthèse vocale permet au site Web de fournir des informations aux utilisateurs en lisant du texte à haute voix, ce qui peut grandement aider les utilisateurs visuellement avec malvoyant et les utilisateurs multitâches.
• L'API de synthèse vocale fournit une variété de méthodes et d'attributs pour personnaliser la sortie de la parole, comme le langage, la vitesse de la parole et le ton. Cette API comprend également des méthodes pour démarrer, mettre en pause, reprendre et arrêter le processus de synthèse de la parole.
• À l'heure actuelle, l'API de synthèse vocale n'est entièrement prise en charge que par Chrome 33 et prend en charge partiellement le navigateur Safari pour iOS 7. Cette API nécessite un support de navigateur plus large pour être pratiquement appliqué sur le site Web.

Il y a quelques semaines, j'ai brièvement discuté de la PNL et de ses technologies connexes. Lorsqu'ils traitent du langage naturel, deux aspects distincts mais complémentaires doivent être pris en considération: la reconnaissance automatique de la parole (ASR) et le texte à la dissection (TTS). Dans un article introduisant l'API de la voix Web, j'ai discuté de l'API de la voix Web, une API qui fournit des capacités de sortie vocales et de texte vocale dans un navigateur Web. Vous avez peut-être remarqué que je ne couvrais que comment implémenter la reconnaissance vocale sur un site Web, pas la synthèse vocale. Dans cet article, nous comblerons cette lacune et décrirons l'API de synthèse de la parole. La reconnaissance vocale offre l'occasion de fournir des informations au site Web pour les utilisateurs, en particulier ceux qui handicapés. Rappelez-vous les cas d'utilisation que je souligne: & gt; sur un site Web, les utilisateurs peuvent utiliser des pages de navigation vocale ou remplir les champs de formulaire. Les utilisateurs peuvent également interagir avec la page en conduisant sans quitter les yeux de la route. Aucun de ces cas n'est pas des cas d'utilisation.

Par conséquent, nous pouvons le considérer comme un canal de l'utilisateur vers le site Web. La synthèse phonétique, au contraire, permet au site Web de fournir des informations aux utilisateurs en lisant du texte à haute voix. Ceci est particulièrement utile pour les personnes atteintes de cécité et souvent celles souffrant de troubles visuels. Il existe autant de cas d'utilisation pour la synthèse de la parole que la reconnaissance vocale. Pensez à certains systèmes mis en œuvre dans de nouvelles voitures qui peuvent lire votre texte ou votre e-mail afin que vous n'ayez pas à quitter les yeux de la route. Les personnes malvoyantes utilisant des ordinateurs connaissent des logiciels comme Jaws, qui peuvent lire à haute voix tout ce qui affiche sur le bureau, leur permettant d'effectuer des tâches. Ces applications sont super, mais elles sont chères. Avec l'API de synthèse vocale, nous pouvons aider les gens qui utilisent notre site Web, qu'ils aient ou non un handicap. Par exemple, supposons que vous écrivez un article de blog (comme je le fais maintenant), et pour le rendre lisible, vous le divisez en paragraphes. N'est-ce pas une bonne occasion d'utiliser une API de synthèse de la parole? En fait, nous pouvons programmer notre site Web afin que l'icône de l'orateur apparaisse à l'écran une fois que l'utilisateur a survécu (ou concentre) le texte. Si l'utilisateur clique sur l'icône, nous appellerons une fonction pour synthétiser le texte du paragraphe donné. Il s'agit d'une amélioration non triviale. Encore mieux, il a des frais généraux très faibles pour nous en tant que développeurs et sans frais généraux pour nos utilisateurs. La mise en œuvre de base de ce concept est montrée ci-dessous. Démonstration de l'API de synthèse vocale Nous avons maintenant une meilleure compréhension des cas d'utilisation de cette API, nous permettant de comprendre ses méthodes et ses propriétés. L'API de synthèse de la méthode et de l'attribut définit une interface appelée SpeechSynthesis, dont la structure est montrée ici. Comme dans l'article précédent, cet article ne couvre pas toutes les propriétés et méthodes décrites dans la spécification. La raison en est qu'il est trop complexe pour le couvrir dans un seul article. Cependant, nous expliquerons suffisamment d'éléments pour vous permettre de comprendre facilement les éléments qui ne sont pas couverts. ### Objet SpeechSynthesutterance Le premier objet que nous devons savoir est l'objet SpeechSynthesoberance. Il représente la prononciation (c'est-à-dire le texte) que le synthétiseur lira à haute voix. Cet objet est très flexible et peut être personnalisé de diverses manières. En plus du texte, nous pouvons également définir la langue, la vitesse de la parole et même le ton utilisé pour prononcer du texte. Voici sa liste d'attributs: - Texte - une chaîne qui spécifie le discours (texte) à synthétiser. - Lang - une chaîne représentant une langue de synthèse de la parole (comme "en-gb" ou "it-it"). - VoiceUri - une chaîne qui spécifie l'adresse du service de synthèse de la parole que l'application Web souhaite utiliser. - Volume - Un nombre qui représente le volume du texte. Il varie de 0 (minimum) à 1 (maximum) (y compris), et la valeur par défaut est 1. - Taux - Le nombre qui représente la vitesse de la parole. Il est relatif au taux d'expression par défaut. La valeur par défaut est 1. Une valeur de 2 signifie que le discours sera lu à haute voix à deux fois la vitesse par défaut. Les valeurs inférieures à 0,1 ou plus ne sont pas autorisées. - Pitch - Le nombre représentant le ton de la voix. Il varie de 0 (minimum) à 2 (maximum) (inclus). La valeur par défaut est 1. Pour instancier cet objet, nous pouvons passer le texte pour être synthétisé en tant que paramètre de constructeur, ou omettre le texte et le définir plus tard. Le code suivant est un exemple du premier cas.// 创建语音对象var utterance = new SpeechSynthesisUtterance('My name is Aurelio De Rosa'); Le deuxième cas consiste à construire une parole de la parole et à attribuer des paramètres comme indiqué ci-dessous. // 创建语音对象var utterance = new SpeechSynthesisUtterance();utterance.text = 'My name is Aurelio De Rosa';utterance.lang = 'it-IT';utterance.rate = 1.2; Certaines méthodes exposées par cet objet sont: - OnStart - Définissez le rappel qui est déclenché au début de la synthèse. - OnPause - Définit le rappel déclenché lorsque la synthèse de la parole est interrompue. - ONRESUME - Définit le rappel qui est déclenché lorsque la composition est restaurée. - Oneend - Définit le rappel déclenché à la fin de la composition. L'objet SpeechSynthesutterance nous permet de définir le texte à lire à haute voix et de configurer comment il est lu à haute voix. Actuellement, nous n'avons créé que des objets représentant la parole. Nous devons encore le lier au synthétiseur. ### Objet SpeechSynthesis L'objet SpeechSynthesis n'a pas besoin d'être instancié. Il appartient à un objet de fenêtre et peut être utilisé directement. Cet objet expose certaines méthodes, telles que: - Speak () - Accepte l'objet SpeechSynthesoberance comme seul paramètre. Cette méthode est utilisée pour synthétiser la parole. - stop () - Arrêtez immédiatement le processus de synthèse. - Pause () - Pause du processus de synthèse. - repseme () - reprendre le processus de synthèse. Une autre façon intéressante est GetVoices (). Il n'accepte aucun paramètre et est utilisé pour récupérer une liste de voix (tableaux) disponibles pour un navigateur spécifique. Chaque entrée de la liste fournit des informations telles que le nom, le nom mnémonique (fournissant des invites vocales à des développeurs tels que "Google Us English", Lang (la langue de la voix, comme IT-It) et Voiceuri (cette voix est l'adresse de la voix Service de synthèse). Remarque importante: Dans Chrome et Safari, l'attribut VoiceUri est appelé voix. Par conséquent, la démo que nous allons construire dans cet article utilise la voix au lieu de Voiceuri. Compatibilité du navigateur Malheureusement, au moment de la rédaction, les seuls navigateurs qui prennent en charge l'API de synthèse vocale sont Chrome 33 (support complet) et iOS 7 (partiellement pris en charge). Demo Cette section fournit une démonstration simple de l'API de synthèse de la parole. Cette page vous permet d'entrer du texte et de le synthétiser. De plus, vous pouvez définir le taux, la tonalité et la langue que vous souhaitez utiliser. Vous pouvez également arrêter, mettre en pause ou reprendre la synthèse du texte à tout moment en utilisant les boutons correspondants fournis. Avant de joindre l'auditeur au bouton, nous avons testé l'implémentation car la prise en charge de cette API est très limitée. Généralement, le test est très simple, y compris le code suivant: if (window.SpeechSynthesisUtterance === undefined) { // 不支持} else { // 读取我的文本} Si le test échoue, nous afficherons le message "L'API ne prend pas en charge".Une fois le support vérifié, nous chargeons dynamiquement les voix disponibles dans la boîte de sélection spécifique placée dans la balise. Notez qu'il y a un problème avec la méthode getVoices () dans Chrome (# 340160). J'ai donc créé une solution de contournement pour cela en utilisant setInterval (). Nous attachons ensuite un gestionnaire à chaque bouton afin qu'ils puissent appeler leurs actions spécifiques (jouer, arrêter, etc.). Une démonstration en direct du code est fournie ici. De plus, cette démo, et toutes les autres démos que j'ai construites jusqu'à présent, peuvent être trouvées dans mon référentiel de démonstration API HTML5. `` `

charse = "utf-8" & gt; name = "Viewport" Content = "width = Device-width, initial-scale = 1.0" / & gt;

Demo API de synthèse de la parole & gt;

• { -Webkit-Box-Size: Border-Box; -Moz-Box-Size: Border-Box; Dimensionnement en boîte: Border-Box; }

<code>  body
  {
    max-width: 500px;
    margin: 2em auto;
    padding: 0 0.5em;
    font-size: 20px;
  }

  h1,
  .buttons-wrapper
  {
    text-align: center;
  }

  .hidden
  {
    display: none;
  }

  #text,
  #log
  {
    display: block;
    width: 100%;
    height: 5em;
    overflow-y: scroll;
    border: 1px solid #333333;
    line-height: 1.3em;
  }

  .field-wrapper
  {
    margin-top: 0.2em;
  }

  .button-demo
  {
    padding: 0.5em;
    display: inline-block;
    margin: 1em auto;
  }
></code>

& gt;

API de synthèse de la parole & gt;

<code><h3 id="gt">></h3>Play area>
 action="" method="get">
  <label> for="text"></label>Text:>
   id="text">>
  <div> class="field-wrapper">
    <label> for="voice"></label>Voice:>
     id="voice">>
  </div>>
  <div> class="field-wrapper">
    <label> for="rate"></label>Rate (0.1 - 10):>
     type="number" id="rate" min="0.1" max="10" value="1" step="any" />
  </div>>
  <div> class="field-wrapper">
    <label> for="pitch"></label>Pitch (0.1 - 2):>
     type="number" id="pitch" min="0.1" max="2" value="1" step="any" />
  </div>>
  <div> class="buttons-wrapper">
     id="button-speak-ss" class="button-demo">Speak>
     id="button-stop-ss" class="button-demo">Stop>
     id="button-pause-ss" class="button-demo">Pause>
     id="button-resume-ss" class="button-demo">Resume>
  </div>>
>

 id="ss-unsupported" class="hidden">API not supported>

<h3 id="gt">></h3>Log>
<div> id="log"></div>>
 id="clear-all" class="button-demo">Clear all>

>
  // Test browser support
  if (window.SpeechSynthesisUtterance === undefined) {
    document.getElementById('ss-unsupported').classList.remove('hidden');
    ['button-speak-ss', 'button-stop-ss', 'button-pause-ss', 'button-resume-ss'].forEach(function(elementId) {
      document.getElementById(elementId).setAttribute('disabled', 'disabled');
    });
  } else {
    var text = document.getElementById('text');
    var voices = document.getElementById('voice');
    var rate = document.getElementById('rate');
    var pitch = document.getElementById('pitch');
    var log = document.getElementById('log');

    // Workaround for a Chrome issue (#340160 - https://code.google.com/p/chromium/issues/detail?id=340160)
    var watch = setInterval(function() {
      // Load all voices available
      var voicesAvailable = speechSynthesis.getVoices();

      if (voicesAvailable.length !== 0) {
        for(var i = 0; i               voices.innerHTML += '                                  'data-voice-uri="' + voicesAvailable[i].voiceURI + '">' +
                              voicesAvailable[i].name +
                              (voicesAvailable[i].default ? ' (default)' : '') + '';
        }

        clearInterval(watch);
      }
    }, 1);

    document.getElementById('button-speak-ss').addEventListener('click', function(event) {
      event.preventDefault();

      var selectedVoice = voices.options[voices.selectedIndex];

      // Create the utterance object setting the chosen parameters
      var utterance = new SpeechSynthesisUtterance();

      utterance.text = text.value;
      utterance.voice = selectedVoice.getAttribute('data-voice-uri');
      utterance.lang = selectedVoice.value;
      utterance.rate = rate.value;
      utterance.pitch = pitch.value;

      utterance.onstart = function() {
        log.innerHTML = 'Speaker started' + '<br>' + log.innerHTML;
      };

      utterance.onend = function() {
        log.innerHTML = 'Speaker finished' + '<br>' + log.innerHTML;
      };

      window.speechSynthesis.speak(utterance);
    });

    document.getElementById('button-stop-ss').addEventListener('click', function(event) {
      event.preventDefault();

      window.speechSynthesis.cancel();
      log.innerHTML = 'Speaker stopped' + '<br>' + log.innerHTML;
    });

    document.getElementById('button-pause-ss').addEventListener('click', function(event) {
      event.preventDefault();

      window.speechSynthesis.pause();
      log.innerHTML = 'Speaker paused' + '<br>' + log.innerHTML;
    });

    document.getElementById('button-resume-ss').addEventListener('click', function(event) {
      event.preventDefault();

      if (window.speechSynthesis.paused === true) {
        window.speechSynthesis.resume();
        log.innerHTML = 'Speaker resumed' + '<br>' + log.innerHTML;
      } else {
        log.innerHTML = 'Unable to resume. Speaker is not paused.' + '<br>' + log.innerHTML;
      }
    });

    document.getElementById('clear-all').addEventListener('click', function() {
      log.textContent = '';
    });
  }
></code>

Conclusion

Cet article présente l'API de synthèse de la parole. Il s'agit d'une API qui synthétise le texte et améliore l'expérience globale des utilisateurs de notre site Web, en particulier les utilisateurs contre visuellement. Comme nous pouvons le voir, cette API expose plusieurs objets, méthodes et propriétés, mais il n'est pas difficile à utiliser. Malheureusement, son support de navigateur est actuellement très pauvre, Chrome et Safari étant les seuls navigateurs qui le soutiennent. J'espère que plus de navigateurs suivront le pas et vous permettra d'envisager de l'utiliser sur votre site Web. J'ai décidé de faire ça. N'oubliez pas de jouer la démo, si vous aimez ce post, veuillez laisser un commentaire. Je veux vraiment entendre vos opinions. Des questions fréquemment posées sur les pages Web et les API de synthèse vocale (FAQ)

Quelle est l'API de synthèse de la parole et comment fonctionne-t-elle?

L'API de synthèse vocale est une interface Web qui permet aux développeurs d'intégrer les fonctionnalités de texte à la dissection dans leurs applications. Il fonctionne en convertissant du texte écrit en mots parlés à l'aide de la voix générée par ordinateur. Cela se fait en divisant le texte en composants de la parole, puis en synthétisant ces composants en parole. L'API fournit une gamme de voix et de langues à choisir, permettant aux développeurs de personnaliser la sortie vocale en fonction de leurs besoins.

Comment implémenter l'API de synthèse de la parole dans une application Web?

La mise en œuvre de l'API de synthèse de la parole dans votre application Web implique plusieurs étapes. Tout d'abord, vous devez créer une nouvelle instance SpeechSynthesutterance et définir sa propriété texte sur le texte que vous souhaitez lire à haute voix. Vous pouvez ensuite définir d'autres propriétés, telles que la parole, le ton et le taux, pour personnaliser la sortie de la parole. Enfin, appelez la méthode des rayons de l'interface SpeechSynthesis pour commencer la synthèse de la parole.

Puis-je personnaliser la voix et le langage de la sortie vocale?

Oui, l'API de synthèse de la parole fournit une gamme de discours et de langues parmi lesquelles vous pouvez choisir. Vous pouvez définir la voix et la langue en définissant les propriétés vocales et langage de l'instance SpeechSynthesutterance. L'API vous permet également d'ajuster la tonalité et la vitesse de votre voix pour personnaliser davantage la sortie.

Quelles sont les limites de l'API de synthèse de la parole?

Bien que l'API de synthèse de la parole soit un outil puissant, il a certaines limites. Par exemple, la disponibilité des voix et du langage peut varier selon le navigateur et le système d'exploitation. De plus, la qualité de la sortie vocale peut varier et peut ne pas toujours sembler naturelle. De plus, cette API ne fournit pas de contrôle sur la prononciation d'un mot ou d'une phrase particulière.

Comment gérer les erreurs lors de l'utilisation de l'API de synthèse de la parole?

L'API de synthèse vocale fournit un événement d'erreur que vous pouvez écouter. Cet événement est déclenché lorsqu'une erreur se produit pendant la synthèse de la parole. Vous pouvez gérer cet événement en ajoutant un auditeur d'événements à l'instance SpeechSynthesutterance et en fournissant une fonction de rappel qui sera appelée lorsque l'événement sera déclenché.

Puis-je faire une pause et reprendre la sortie vocale?

Oui, l'API de synthèse vocale fournit des méthodes de pause et de récupération que vous pouvez utiliser pour contrôler votre sortie vocale. Vous pouvez appeler ces méthodes sur l'interface SpeechSynthesis pour faire une pause et restaurer la voix.

L'API de synthèse vocale est-elle prise en charge dans tous les navigateurs?

L'API de synthèse vocale est prise en charge dans la plupart des navigateurs modernes, notamment Chrome, Firefox, Safari et Edge. Cependant, la disponibilité des voix et des langues peut varier selon le navigateur et le système d'exploitation.

Puis-je utiliser l'API de synthèse vocale dans mon application mobile?

Oui, l'API de synthèse vocale peut être utilisée dans les applications mobiles. Cependant, la disponibilité des voix et des langues peut varier selon le système d'exploitation mobile.

Comment tester l'API de synthèse de la parole?

Vous pouvez tester l'API de synthèse de la parole en créant une page Web simple qui convertit le texte écrit en discours à l'aide de l'API. Vous pouvez ensuite essayer différentes voix, langues, tons et taux pour voir comment elles affectent la sortie vocale.

Où puis-je trouver plus d'informations sur l'API de synthèse vocale?

Vous pouvez trouver plus d'informations sur l'API de synthèse vocale dans la documentation officielle fournie par la World Wide Web Alliance (W3C). Il existe également de nombreux tutoriels et articles en ligne qui fournissent des explications et des exemples détaillés sur la façon d'utiliser l'API.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!