Faites un lecteur audio contrôlé par la voix avec l'API de discours Web

Points de base

• Web Voice API est une API JavaScript qui permet aux développeurs Web d'intégrer la reconnaissance vocale et la synthèse dans leurs pages Web, améliorant ainsi l'expérience utilisateur, en particulier pour les personnes handicapées ou les utilisateurs qui ont besoin de gérer plusieurs tâches simultanément.
• L'API de reconnaissance vocale nécessite actuellement une connexion Internet et des autorisations utilisateur pour accéder au microphone. La bibliothèque telle qu'Annyang peut aider à gérer la complexité et assurer la compatibilité de l'avant.
• Vous pouvez utiliser l'API de synthèse de la parole et l'API de reconnaissance vocale pour construire des lecteurs audio contrôlés par la voix. Cela permet à l'utilisateur de naviguer entre des chansons et de demander des chansons spécifiques à l'aide de commandes vocales.
• Le lecteur audio contiendra des données de paramètres, des méthodes d'interface utilisateur, des méthodes d'API vocale et des méthodes de fonctionnement audio. Les codes qui identifient et traitent la saisie des utilisateurs ne sont applicables qu'aux navigateurs WebKit.
• L'API vocale Web a le potentiel d'être utilisé dans de nombreux domaines, tels que l'utilisation de commandes vocales pour parcourir les e-mails, naviguer sur des sites Web ou rechercher le Web. Avec l'implémentation stable et les nouvelles fonctionnalités ajoutées, l'utilisation de cette API devrait croître.

/ utilisé pour masquer / afficher des blocs supplémentaires / .sp_hiddenblock { marge: 2px; Border: 1px RVB solide (250, 197, 82); Border-Radius: 3px; rembourrage: 5px; Color en arrière-plan: RGBA (250, 197, 82, 0,7); } .sp_hiddenblock.sp_hide { Affichage: Aucun! IMPORTANT; } Cet article a été examiné par Edwin Reynoso et Mark Brown. Merci à tous les évaluateurs de pairs SitePoint pour avoir obtenu le contenu de sitepoint à son meilleur!

Web Voice API est une API JavaScript qui permet aux développeurs Web d'intégrer des capacités de reconnaissance et de synthèse vocales dans leurs pages Web.

Il y a de nombreuses raisons à cela. Par exemple, pour améliorer l'expérience des personnes handicapées (en particulier les utilisateurs ayant une déficience visuelle ou des utilisateurs à mobilité réduite des mains), ou pour permettre aux utilisateurs d'interagir avec les applications Web tout en effectuant d'autres tâches, telles que la conduite.

Si vous n'avez jamais entendu parler de l'API de la voix Web, ou si vous voulez commencer rapidement, ce pourrait être une bonne idée de lire les articles d'Aurelio de Rosa Introduction à l'API de la voix Web, à l'API de la synthèse vocale et à l'idée des formulaires parlants.

Prise en charge du navigateur

Les fabricants de navigateurs n'ont commencé que récemment à implémenter à la fois l'API de reconnaissance vocale et l'API de synthèse vocale. Comme vous pouvez le voir, la prise en charge de ces API est loin d'être parfaite, donc si vous étudiez ce tutoriel, utilisez le bon navigateur.

De plus, l'API de reconnaissance vocale nécessite actuellement une connexion Internet car la voix sera transmise sur le réseau et le résultat sera renvoyé au navigateur. Si la connexion utilise HTTP, l'utilisateur doit autoriser le site à utiliser son microphone chaque fois que la demande est faite. Si la connexion utilise HTTPS, vous n'avez besoin de le faire qu'une seule fois.

Bibliothèque de reconnaissance vocale

La bibliothèque

nous aide à gérer la complexité et garantit que nous restons compatibles. Par exemple, lorsqu'un autre navigateur commence à soutenir l'API de reconnaissance vocale, nous n'avons pas à nous soucier d'ajouter des préfixes de fournisseurs.

Annyang est une telle bibliothèque, qui est très facile à utiliser. en savoir plus .

Pour initialiser Annyang, nous ajoutons leurs scripts à notre site Web:

<🎜>

Nous pouvons vérifier si l'API est prise en charge comme ceci:

if (annyang) { /*逻辑*/ }

et ajoutez une commande à l'aide d'un objet qui utilise le nom de commande comme clé et le rappel comme méthode:

var commands = {
  'show divs': function() {
    $('div').show();
  },
  'show forms': function() {
    $("form").show();
  }
};

Enfin, nous les ajoutons et commençons la reconnaissance vocale avec la commande suivante:

annyang.addCommands(commands);
annyang.start();

Lecteur audio contrôlé vocal

Dans cet article, nous construirons un lecteur audio contrôlé par la voix. Nous utiliserons à la fois l'API Speech Synthesis (utilisé pour dire à l'utilisateur quelle chanson est jouée, ou la commande n'est pas reconnue) et l'API de reconnaissance vocale (convertissant les commandes vocales en chaînes qui déclencheront une logique d'application différente).

L'avantage de l'utilisation du lecteur audio avec l'API de la voix Web est que les utilisateurs peuvent parcourir d'autres pages du navigateur ou minimiser le navigateur et effectuer d'autres actions tout en étant en mesure de basculer entre les chansons. Si nous avons beaucoup de chansons sur notre liste de lecture, nous pouvons même demander une chanson spécifique sans recherche manuelle (si nous connaissons son nom ou son chanteur, bien sûr).

Nous ne compterons pas sur des bibliothèques tierces pour la reconnaissance de la parole, car nous voulons montrer comment utiliser l'API sans ajouter de dépendances supplémentaires au projet. Les lecteurs audio contrôlés par voix ne prennent en charge que les navigateurs qui prennent en charge l'attribut interimResults. La dernière version de Chrome devrait être un choix sûr.

Comme toujours, vous pouvez trouver le code complet sur GitHub, ainsi qu'une démo sur Codepen.

débutant - playlist

Commençons par une liste de lecture statique. Il se compose d'un objet qui contient différentes chansons dans un tableau. Chaque chanson est un nouvel objet contenant le chemin du fichier, le nom du chanteur et le nom de la chanson:

var data = {
  "songs": [
    {
      "fileName": "https://www.ruse-problem.org/songs/RunningWaters.mp3",
      "singer" : "Jason Shaw",
      "songName" : "Running Waters"
    },
    ...

Nous devrions être en mesure d'ajouter de nouveaux objets au tableau songs et d'inclure automatiquement de nouvelles chansons dans notre lecteur audio.

lecteur audio

Regardons maintenant le joueur lui-même. Ce sera un objet contenant les éléments suivants:

• Certains réglages de données
• Méthodes liées à l'interface utilisateur (telles que le remplissage des listes de chansons)
• Méthodes liées à l'API vocale (telles que les commandes de reconnaissance et de traitement)
• Méthodes liées au fonctionnement audio (par exemple, jouer, pause, arrêter, précédent, ensuite)

Définir les données

C'est relativement simple.

var audioPlayer = {
  audioData: {
    currentSong: -1,
    songs: []
  },

L'attribut

currentSong se réfère à l'index de la chanson dans laquelle se trouve actuellement. Ceci est utile, par exemple, lorsque nous devons jouer la chanson précédente / suivante Song ou Stop / Pause.

songs Le tableau contient toutes les chansons que l'utilisateur a écoutées. Cela signifie que la prochaine fois que l'utilisateur écoutera la même chanson, nous pouvons le charger à partir du tableau sans le télécharger.

Vous pouvez afficher le code complet ici.

Méthode UI

L'UI contiendra une liste des commandes disponibles, une liste des pistes disponibles et une zone de contexte qui informe l'utilisateur de l'action actuelle et des commandes précédentes. Je n'entrerai pas dans les détails de la méthode de l'interface utilisateur, mais donnerai un bref aperçu. Vous pouvez trouver le code pour ces méthodes ici.

Charge

Cela irara la liste de lecture que nous avons déclaré plus tôt et ajoutera le nom de la chanson, ainsi que le nom de l'artiste, sur la liste des pistes disponibles.

ChangeCurrentSongeffect

Cela indique quelle chanson joue actuellement (en la marquant en vert et en ajoutant une paire d'écouteurs à côté), et quelles chansons ont été jouées.

playsong

Cela indique que la chanson de l'utilisateur joue ou se termine via la méthode changeStatusCode (ajoutant ces informations à la boîte) et en informant l'utilisateur de ce changement via l'API vocale.

ChangeStaturuscode

Comme mentionné ci-dessus, cela met à jour le message d'état dans la zone de contexte (par exemple, indiquant qu'une nouvelle chanson est en cours de lecture) et utilise la méthode speak pour informer l'utilisateur de ce changement.

ChangelastCommand

Une petite fonction d'assistance pour mettre à jour la dernière boîte de commande.

togglespinner

Une petite fonction d'assistance pour masquer ou afficher l'icône du spinner (indiquant que la commande vocale de l'utilisateur est actuellement en cours de traitement).

Méthode du joueur

Le joueur sera responsable de ce à quoi vous pourriez vous attendre, à savoir: commencer, arrêter et faire une pause de lecture et se déplacer entre les pistes. Encore une fois, je ne vais pas entrer dans ces méthodes en détail, mais je veux plutôt vous diriger vers notre base de code GitHub.

Play

Cela vérifie si l'utilisateur a écouté la chanson. Sinon, il commence la chanson, sinon elle n'appellera que la méthode playSong que nous avons discutée plus tôt sur la chanson actuellement mise en cache. Ceci est dans audioData.songs et correspond à l'index currentSong.

Pausesong

Cela s'arrête ou s'arrête complètement (retourne le temps de jeu au début de la chanson) une chanson, selon ce qui est passé comme deuxième paramètre. Il met également à jour le code d'état pour informer l'utilisateur que la chanson a été arrêtée ou interrompue.

stop

Cela fait une pause ou arrête la chanson en fonction de son premier et seul paramètre:

prev

Cela vérifie si la chanson précédente est mise en cache, et si oui, fait une pause la chanson actuelle, diminue currentSong et joue à nouveau la chanson actuelle. Si la nouvelle chanson n'est pas dans le tableau, elle fait la même chose, mais qu'elle charge d'abord la chanson basée sur le nom / chemin de fichier correspondant à l'index diminue currentSong.

suivant

Si l'utilisateur a déjà écouté une chanson, cette méthode essaiera de la mettre en pause. Si la chanson suivante existe dans notre objet de données (c'est-à-dire notre liste de lecture), il le charge et la joue. S'il n'y a pas de prochaine chanson, cela changera simplement le code d'état et informera l'utilisateur qu'il a atteint la dernière chanson.

SearchSpecificSong

Cela prend le mot-clé en tant que paramètre et effectue une recherche linéaire entre le nom de la chanson et l'artiste, puis joue le premier match.

Méthode de l'API vocale

L'API vocale est étonnamment facile à mettre en œuvre. En fait, seulement deux lignes de code peuvent faire en sorte que l'application Web parle à l'utilisateur:

<🎜>

Ce que nous faisons ici, c'est créer un objet utterance avec le texte que nous voulons dire. L'interface speechSynthesis (disponible sur l'objet window) est responsable de la gestion de cet objet utterance et du contrôle de la lecture de la voix générée.

Continuez à l'essayer dans votre navigateur. C'est aussi simple!

parler

Nous pouvons voir son application pratique dans notre méthode speak, qui lit à haute voix le message passé comme un paramètre:

if (annyang) { /*逻辑*/ }

Si un deuxième paramètre (scope) existe, une fois le message lu, nous appelons la méthode scope sur play (qui sera un objet audio).

ProcessCommands

Cette méthode n'est pas si excitante. Il prend une commande comme argument et appelle la méthode appropriée pour y répondre. Il utilise une expression régulière pour vérifier si l'utilisateur souhaite jouer une chanson spécifique, sinon, il entre dans une instruction Switch pour tester différentes commandes. Si aucune ne correspond à la commande reçue, elle informe l'utilisateur que la commande n'est pas comprise.

Vous pouvez trouver son code ici.

TELE TOUT ensemble

Jusqu'à présent, nous avons un objet de données représentant la playlist, et un objet audioPlayer représentant le lecteur lui-même. Nous devons maintenant écrire du code pour identifier et traiter l'entrée des utilisateurs. Veuillez noter que cela s'applique uniquement aux navigateurs WebKit.

le code qui rend l'utilisateur à parler à votre application aussi simple qu'auparavant:

var commands = {
  'show divs': function() {
    $('div').show();
  },
  'show forms': function() {
    $("form").show();
  }
};

Cela invitera les utilisateurs à permettre aux pages d'accéder à leur microphone. Si vous autorisez l'accès, vous pouvez commencer à parler et lorsque vous vous arrêtez, l'événement onresult sera déclenché pour rendre le résultat de la capture vocale disponible en tant qu'objet JavaScript.

Référence: API de reconnaissance de la parole HTML5

Nous pouvons l'implémenter dans notre application comme suit:

annyang.addCommands(commands);
annyang.start();

Comme vous pouvez le voir, nous avons testé la présence de webkitSpeechRecognition sur l'objet window. S'il existe, alors nous pouvons commencer, sinon nous dirons à l'utilisateur que le navigateur ne le prend pas en charge. Si tout se passe bien, nous définissons ensuite quelques options. Parmi eux, lang est une option intéressante qui améliore les résultats de reconnaissance en fonction de votre origine.

Ensuite, nous déclarons les gestionnaires des événements start et onresult avant de démarrer la méthode onend.

Traitement Résultats

Lorsque le reconnaissance de la parole obtient des résultats, du moins dans le contexte de la mise en œuvre actuelle de la reconnaissance vocale et de nos besoins, nous voulons faire quelques choses. Chaque fois qu'il y a un résultat, nous voulons le sauvegarder dans le tableau et définir un délai d'attente pour attendre trois secondes afin que le navigateur puisse collecter d'autres résultats. Après trois secondes, nous voulons utiliser les résultats collectés et les boucler dans l'ordre inverse (les résultats plus récents sont plus susceptibles d'être précis) et de vérifier si les transcrits identifiés contiennent l'une des commandes dont nous disposons. Si c'est le cas, nous exécutons la commande et redémarrons la reconnaissance vocale. Nous le faisons car cela peut prendre jusqu'à une minute pour attendre le résultat final, ce qui rend notre lecteur audio plutôt insensible et dénué de sens car il sera plus rapide en un clic sur un bouton.

<🎜>

Parce que nous n'utilisons pas la bibliothèque, nous devons écrire plus de code pour configurer notre reconnaissance vocale, faire une boucle à travers chaque résultat et vérifier si sa transcription correspond au mot clé donné.

Enfin, nous le redémarrons immédiatement à la fin de la reconnaissance vocale:

if (annyang) { /*逻辑*/ }

Vous pouvez afficher le code complet de cette section ici.

c'est tout. Nous avons maintenant un lecteur audio entièrement fonctionnel et contrôlé par voix. Je vous recommande fortement de télécharger le code à partir de GitHub et de l'essayer, ou de consulter la démo Codepen. Je fournis également une version qui sert sur HTTPS.

Conclusion

J'espère que ce tutoriel pratique fournira une bonne introduction aux possibilités de l'API de la voix Web. Je pense que lorsque la mise en œuvre se stabilise et que de nouvelles fonctionnalités sont ajoutées, nous verrons l'utilisation de cette API se développer. Par exemple, je pense que Future YouTube sera complètement contrôlée par la voix, où nous pouvons regarder des vidéos de différents utilisateurs, jouer des chansons spécifiques et se déplacer entre des chansons avec des commandes vocales.

L'API de la voix Web peut également améliorer de nombreux autres domaines ou ouvrir de nouvelles possibilités. Par exemple, utilisez la voix pour parcourir les e-mails, naviguer dans des sites Web ou rechercher le réseau.

utilisez-vous cette API dans votre projet? J'adorerais vous entendre dans les commentaires ci-dessous.

Des questions fréquemment posées sur les joueurs audio de contrôle vocal utilisant une API vocale Web (FAQ)

Comment fonctionne l'API vocale Web dans un lecteur audio contrôlé par la voix?

L'API de la voix Web est un outil puissant qui permet aux développeurs d'intégrer la reconnaissance et la synthèse de la parole dans leurs applications Web. Dans un lecteur audio contrôlé par la voix, l'API fonctionne en convertissant les commandes parlées en texte que l'application peut alors interpréter et exécuter. Par exemple, si l'utilisateur dit "Play", l'API le convertira en texte, et l'application comprendra qu'il s'agit de la commande pour commencer à jouer audio. Ce processus implique des algorithmes sophistiqués et des techniques d'apprentissage automatique pour identifier et interpréter avec précision la parole humaine.

Quels sont les avantages de l'utilisation des lecteurs audio contrôlés par la voix?

Les lecteurs audio contrôlés par la voix présentent plusieurs avantages. Premièrement, il offre une expérience mains libres, ce qui est particulièrement utile lorsque les utilisateurs sont occupés avec d'autres tâches. Deuxièmement, il peut améliorer l'accessibilité pour les utilisateurs à mobilité réduite, qui peut avoir du mal à utiliser les contrôles traditionnels. Enfin, il offre une expérience utilisateur nouvelle et engageante qui peut faire ressortir votre application de la concurrence.

Puis-je utiliser l'API vocale dans un navigateur Web?

La plupart des navigateurs Web modernes prennent en charge l'API de la voix Web, notamment Google Chrome, Mozilla Firefox et Microsoft Edge. Cependant, il est toujours préférable de vérifier la compatibilité spécifique du navigateur avant d'intégrer les API dans votre application, car le support peut varier entre les versions et les plates-formes.

Comment améliorer la précision de la reconnaissance vocale chez les joueurs audio contrôlés par la voix?

Vous pouvez utiliser des microphones de haute qualité, réduire le bruit de fond et former des API pour mieux comprendre la voix et les accents de l'utilisateur pour améliorer la précision de la reconnaissance vocale. De plus, vous pouvez implémenter la gestion des erreurs dans votre application pour gérer les commandes non identifiées et fournir des commentaires aux utilisateurs.

Puis-je personnaliser les commandes vocales dans le lecteur audio contrôlé par la voix?

Oui, vous pouvez personnaliser les commandes vocales dans les lecteurs audio contrôlés par la voix. Cela peut être fait en définissant votre propre ensemble de commandes dans votre code d'application, que l'API vocale Web reconnaîtra et interprétera ensuite. Cela vous permet de personnaliser l'expérience utilisateur en fonction de vos besoins et préférences spécifiques.

L'API de la voix Web prend-elle en charge les langues autres que l'anglais?

Oui, l'API Web vocale prend en charge plusieurs langues. Vous pouvez spécifier une langue dans les paramètres de l'API, et il reconnaîtra et interprétera les commandes pour cette langue. Cela en fait un outil universel pour développer des applications pour le public international.

Comment est la sécurité de l'API vocale Web?

L'API de la voix Web est conçue avec la sécurité à l'esprit. Il utilise une connexion HTTPS sécurisée pour transmettre des données vocales et ne stocke aucune information personnelle. Cependant, comme toute technologie Web, il est important de suivre les meilleures pratiques de sécurité, telles que la mise à jour régulière des logiciels et la protection de vos applications contre les vulnérabilités Web courantes.

Puis-je utiliser l'API Web Voice dans mon application mobile?

Bien que l'API Web vocale soit principalement conçue pour une utilisation dans les applications Web, il peut également être utilisé dans des applications mobiles via des vues Web. Cependant, pour les applications mobiles natives, vous voudrez peut-être envisager d'utiliser des API de reconnaissance vocale spécifiques à la plate-forme qui peuvent fournir de meilleures performances et intégations.

Quelles sont les limites de l'API de la voix Web?

Bien que l'API Web vocale soit un outil puissant, il a certaines limites. Par exemple, il nécessite une connexion Internet au travail, et sa précision peut être affectée par des facteurs tels que le bruit de fond et l'accent de l'utilisateur. De plus, la prise en charge de l'API peut varier entre différents navigateurs Web et plateformes.

Comment démarrer avec l'API Web Voice?

Pour commencer avec l'API Web Voice, vous devez comprendre les bases du développement JavaScript et Web. Vous pouvez ensuite parcourir la documentation de l'API qui fournit des informations détaillées sur leurs fonctionnalités et comment les utiliser. Il existe également de nombreux tutoriels et exemples en ligne disponibles pour vous aider à apprendre à intégrer les API dans vos propres applications.

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!