Ajoutez une recherche vocale à votre Nuxtpp en quelques étapes simples

Dans un monde dominé par « Hey Siri » et « Okay Google », intégrer la recherche vocale dans votre application Web n'est pas seulement une option, c'est une nécessité. Imaginez permettre à vos utilisateurs d'interagir avec votre application Nuxt 3 en mains libres, offrant ainsi une expérience fluide et futuriste. En tirant parti de l'API Web Speech, nous transformerons votre application en un assistant vocal qui écoute, comprend et réagit.

---

Installation

Tout d’abord, préparons votre projet Nuxt 3. Si vous n’en avez pas déjà un, il est temps de commencer. Allumez votre terminal et créez une nouvelle application Nuxt 3 :

npx nuxi init voice-search-app
cd voice-search-app
npm install
npm run dev

Cela lancera le serveur de développement Nuxt. Ouvrez http://localhost:3000 dans votre navigateur et vous devriez voir la page d'accueil de Nuxt. Notre environnement étant prêt, nous sommes prêts à introduire de la magie vocale.

---

Création du composant de recherche vocale

Pour commencer, créons un composant dédié pour gérer la reconnaissance vocale. Dans le répertoire des composants, créez un fichier appelé VoiceSearch.vue :

touch components/VoiceSearch.vue

Ce composant gérera tout : le démarrage et l'arrêt du microphone, le traitement de la saisie vocale et l'affichage de la transcription. Dans le fichier, définissez une configuration réactive à l'aide de l'API de composition de Vue :

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const transcript = ref('');
const isListening = ref(false);
const isSupported = ref(false);

let recognition;

const startListening = () => {
  if (!recognition) {
    console.error('SpeechRecognition instance is unavailable.');
    return;
  }
  isListening.value = true;
  recognition.start();
};

const stopListening = () => {
  if (!recognition) {
    console.error('SpeechRecognition instance is unavailable.');
    return;
  }
  isListening.value = false;
  recognition.stop();
};

onMounted(() => {
  const SpeechRecognition =
    window.SpeechRecognition || window.webkitSpeechRecognition;

  if (!SpeechRecognition) {
    console.warn('SpeechRecognition is not supported in this browser.');
    isSupported.value = false;
    return;
  }

  isSupported.value = true;
  recognition = new SpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = false;
  recognition.lang = 'en-US';

  recognition.onresult = (event) => {
    const result = event.results[event.results.length - 1][0].transcript;
    transcript.value = result;
  };

  recognition.onerror = (event) => {
    console.error('Recognition error:', event.error);
  };
});

onUnmounted(() => {
  if (recognition) {
    recognition.abort();
  }
});
</script>

Cette configuration initialise une instance SpeechRecognition, écoute les résultats et gère les erreurs avec élégance. La transcription des variables réactives et isListening gardent une trace des entrées de l'utilisateur et de l'état du système.

---

2228 GRATUITS RESSOURCES POUR LES DÉVELOPPEURS !! ❤️ ?? _{(mis à jour quotidiennement)}

1400 modèles HTML gratuits

359 articles d'actualité gratuits

69 invites IA gratuites

323 bibliothèques de codes gratuites

52 extraits de code et passe-partout gratuits pour Node, Nuxt, Vue et plus !

25 bibliothèques d'icônes Open Source gratuites

Visitez dailysandbox.pro pour accéder gratuitement à un trésor de ressources !

---

Conception de l'interface utilisateur

Une fois la logique en place, il est temps de créer l’interface. Le modèle de composant comprend des boutons pour démarrer et arrêter l'écoute, ainsi qu'un affichage de transcription :

<template>
  <div>



<p>Add some simple styles to ensure a clean and user-friendly layout:<br>
</p>

<pre class="brush:php;toolbar:false"><style scoped>
.voice-search {
  text-align: center;
  padding: 20px;
  font-family: Arial, sans-serif;
}

button {
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.start-button {
  background-color: #4caf50;
}

.start-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.stop-button {
  background-color: #f44336;
}

.stop-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

p {
  margin-top: 20px;
  font-size: 18px;
  color: #333;
}
</style>

---

Rassembler tout cela dans Nuxt

Pour utiliser le composant de recherche vocale, importez-le dans la page principale de votre application. Ouvrez pages/index.vue et remplacez son contenu par :

<template>
  <div>



<p>Start your app with npm run dev, and visit http://localhost:3000 to see the magic unfold. Click "Start Voice Search," speak into your microphone, and watch as your words appear on the screen in real time.</p>


<hr>

<h3>
  
  
  Enhancing the Experience
</h3>

<p>Voice search is already impressive, but you can make it even better:</p>

<p><strong>Handle Fallbacks for Unsupported Browsers</strong> : Ensure users can still interact with the app even if their browser doesn’t support the Web Speech API:<br>
</p>

<pre class="brush:php;toolbar:false"><p v-else>Your browser does not support voice search. Please type your query manually.</p>

Lier la transcription à une recherche : Ajouter un bouton pour effectuer une recherche basée sur la transcription :

npx nuxi init voice-search-app
cd voice-search-app
npm install
npm run dev

---

En quelques lignes de code seulement, vous avez transformé votre application Nuxt 3 en un outil de pointe qui écoute la voix des utilisateurs. La recherche vocale n'est pas seulement une fonctionnalité à la mode : elle témoigne de la puissance des API Web modernes et de leur capacité à rendre la technologie plus accessible et interactive.

En adoptant des outils tels que l'API Web Speech, vous ne vous contentez pas de créer des applications ; vous façonnez l’avenir des interactions utilisateur. Alors n'hésitez plus, déployez votre application et laissez vos utilisateurs découvrir la magie de la recherche vocale.

Pour plus de conseils sur le développement Web, consultez DailySandbox et inscrivez-vous à notre newsletter gratuite pour garder une longueur d'avance !

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!