Fügen Sie in wenigen Schritten eine Sprachsuche zu Ihrem Nuxtpp hinzu

In einer Welt, die von „Hey Siri“ und „Okay Google“ dominiert wird, ist die Integration der Sprachsuche in Ihre Webanwendung nicht nur eine Option, sondern eine Notwendigkeit. Stellen Sie sich vor, dass Ihre Benutzer freihändig mit Ihrer Nuxt 3-App interagieren können und so ein nahtloses und futuristisches Erlebnis bieten. Durch die Nutzung der Web Speech API verwandeln wir Ihre App in einen sprachgesteuerten Assistenten, der zuhört, versteht und reagiert.

---

Aufstellen

Lassen Sie uns zunächst Ihr Nuxt 3-Projekt vorbereiten. Wenn Sie noch keins haben, ist es an der Zeit, loszulegen. Starten Sie Ihr Terminal und erstellen Sie eine neue Nuxt 3-App:

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

Dadurch wird der Nuxt-Entwicklungsserver hochgefahren. Öffnen Sie http://localhost:3000 in Ihrem Browser und Sie sollten die Willkommensseite von Nuxt sehen. Wenn unsere Umgebung bereit ist, sind wir bereit, sprachgesteuerte Magie einzuführen.

---

Erstellen der Sprachsuchkomponente

Zunächst erstellen wir eine spezielle Komponente für die Spracherkennung. Erstellen Sie im Komponentenverzeichnis eine Datei mit dem Namen VoiceSearch.vue:

touch components/VoiceSearch.vue

Diese Komponente verwaltet alles: das Starten und Stoppen des Mikrofons, die Verarbeitung von Spracheingaben und die Anzeige des Transkripts. Definieren Sie in der Datei ein reaktives Setup mithilfe der Composition API von 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>

Dieses Setup initialisiert eine SpeechRecognition-Instanz, wartet auf Ergebnisse und behandelt Fehler ordnungsgemäß. Die reaktiven Variablen transcript und isListening verfolgen die Benutzereingaben und den Systemstatus.

---

2228 KOSTENLOS RESSOURCEN FÜR ENTWICKLER!! ❤️ ?? _{(täglich aktualisiert)}

1400 kostenlose HTML-Vorlagen

359 kostenlose Nachrichtenartikel

69 kostenlose KI-Eingabeaufforderungen

323 kostenlose Code-Bibliotheken

52 kostenlose Code-Snippets und Boilerplates für Node, Nuxt, Vue und mehr!

25 kostenlose Open-Source-Icon-Bibliotheken

Besuchen Sie dailysandbox.pro für kostenlosen Zugang zu einer Schatzkammer voller Ressourcen!

---

Entwerfen der Benutzeroberfläche

Sobald die Logik vorhanden ist, ist es an der Zeit, die Schnittstelle zu erstellen. Die Komponentenvorlage enthält Schaltflächen zum Starten und Stoppen des Hörens sowie eine Transkriptanzeige:

<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>

---

Alles zusammen in Nuxt

Um die Sprachsuchkomponente zu verwenden, importieren Sie sie in die Hauptseite Ihrer App. Öffnen Sie „pages/index.vue“ und ersetzen Sie den Inhalt durch:

<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>

Verknüpfen Sie das Transkript mit einer Suche: Fügen Sie eine Schaltfläche hinzu, um eine Suche basierend auf dem Transkript durchzuführen:

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

---

Mit nur wenigen Codezeilen haben Sie Ihre Nuxt 3-App in ein hochmodernes Tool verwandelt, das auf die Stimmen der Benutzer hört. Die Sprachsuche ist nicht nur eine trendige Funktion – sie ist ein Beweis für die Leistungsfähigkeit moderner Web-APIs und ihre Fähigkeit, Technologie zugänglicher und interaktiver zu machen.

Durch die Nutzung von Tools wie der Web Speech API erstellen Sie nicht nur Apps; Sie gestalten die Zukunft der Benutzerinteraktionen. Also legen Sie los, stellen Sie Ihre App bereit und lassen Sie Ihre Benutzer die Magie der Sprachsuche erleben.

Weitere Tipps zur Webentwicklung finden Sie unter DailySandbox und abonnieren Sie unseren kostenlosen Newsletter, um immer auf dem Laufenden zu bleiben!

Das obige ist der detaillierte Inhalt vonFügen Sie in wenigen Schritten eine Sprachsuche zu Ihrem Nuxtpp hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!