Tambahkan Carian Suara pada Nuxtpp anda dalam Langkah mudah

Dalam dunia yang dikuasai oleh "Hey Siri" dan "Okay Google," menyepadukan carian suara ke dalam aplikasi web anda bukan sekadar pilihan—ia adalah satu keperluan. Bayangkan membolehkan pengguna anda berinteraksi dengan apl Nuxt 3 anda tanpa tangan, memberikan pengalaman yang lancar dan futuristik. Dengan memanfaatkan API Pertuturan Web, kami akan mengubah apl anda menjadi pembantu berkuasa suara yang mendengar, memahami dan bertindak balas.

---

Persediaan

Pertama, mari sediakan projek Nuxt 3 anda. Jika anda belum memilikinya, sudah tiba masanya untuk bermula. Nyalakan terminal anda dan buat apl Nuxt 3 baharu:

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

Ini akan memutarkan pelayan pembangunan Nuxt. Buka http://localhost:3000 dalam penyemak imbas anda, dan anda akan melihat halaman alu-aluan Nuxt. Dengan persekitaran kami sedia, kami bersedia untuk memperkenalkan beberapa sihir berkuasa suara.

---

Membina Komponen Carian Suara

Untuk bermula, mari buat komponen khusus untuk mengendalikan pengecaman suara. Di dalam direktori komponen, buat fail bernama VoiceSearch.vue:

touch components/VoiceSearch.vue

Komponen ini akan mengurus segala-galanya: memulakan dan menghentikan mikrofon, memproses input suara dan memaparkan transkrip. Di dalam fail, tentukan persediaan reaktif menggunakan API Komposisi 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>

Persediaan ini memulakan contoh SpeechRecognition, mendengar keputusan dan mengendalikan ralat dengan anggun. Transkrip pembolehubah reaktif dan isListening menjejaki input pengguna dan keadaan sistem.

---

2228 PERCUMA SUMBER UNTUK PEMAJU!! ❤️ ?? _{(dikemas kini setiap hari)}

1400 Templat HTML Percuma

359 Artikel Berita Percuma

69 Gesaan AI Percuma

323 Perpustakaan Kod Percuma

52 Coretan Kod & Plat Dandang untuk Nod, Nuxt, Vue dan banyak lagi!

25 Perpustakaan Ikon Sumber Terbuka Percuma

Lawati dailysandbox.pro untuk akses percuma kepada harta karun sumber!

---

Merekabentuk Antara Muka Pengguna

Dengan logik yang ditetapkan, tiba masanya untuk mencipta antara muka. Templat komponen termasuk butang untuk memulakan dan berhenti mendengar, serta paparan transkrip:

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

---

Menyatukan Semuanya dalam Nuxt

Untuk menggunakan komponen carian suara, importnya ke halaman utama apl anda. Buka pages/index.vue dan gantikan kandungannya dengan:

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

Pautkan Transkrip kepada Carian : Tambah butang untuk melakukan carian berdasarkan transkrip:

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

---

Dengan hanya beberapa baris kod, anda telah mengubah apl Nuxt 3 anda menjadi alat canggih yang mendengar suara pengguna. Carian suara bukan sekadar ciri bergaya—ia adalah bukti kuasa API web moden dan keupayaannya untuk menjadikan teknologi lebih mudah diakses dan interaktif.

Dengan menggunakan alatan seperti Web Speech API, anda bukan sekadar membina apl; anda sedang membentuk masa depan interaksi pengguna. Jadi teruskan, gunakan apl anda dan biarkan pengguna anda mengalami keajaiban carian suara.

Untuk mendapatkan lebih banyak petua tentang pembangunan web, lihat DailySandbox dan daftar untuk surat berita percuma kami untuk kekal di hadapan!