Add a Voice Search to your Nuxtpp in asy Steps

In a world dominated by "Hey Siri" and "Okay Google," integrating voice search into your web application isn’t just an option—it’s a necessity. Imagine enabling your users to interact with your Nuxt 3 app hands-free, providing a seamless and futuristic experience. By leveraging the Web Speech API, we’ll transform your app into a voice-powered assistant that listens, understands, and reacts.

Setup

First, let’s prepare your Nuxt 3 project. If you don’t already have one, it’s time to get started. Fire up your terminal and create a fresh Nuxt 3 app:

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

This will spin up the Nuxt development server. Open http://localhost:3000 in your browser, and you should see the Nuxt welcome page. With our environment ready, we’re set to introduce some voice-powered magic.

Building the Voice Search Component

To begin, let’s create a dedicated component to handle voice recognition. Inside the components directory, create a file called VoiceSearch.vue:

touch components/VoiceSearch.vue

This component will manage everything: starting and stopping the microphone, processing voice input, and displaying the transcript. Inside the file, define a reactive setup using Vue’s Composition API:

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

This setup initializes a SpeechRecognition instance, listens for results, and handles errors gracefully. The reactive variables transcript and isListening keep track of the user’s input and the system’s state.

2228 FREE RESOURCES FOR DEVELOPERS!! ❤️ ?? _{(updated daily)}

1400 Free HTML Templates

359 Free News Articles

69 Free AI Prompts

323 Free Code Libraries

52 Free Code Snippets & Boilerplates for Node, Nuxt, Vue, and more!

25 Free Open Source Icon Libraries

Visit dailysandbox.pro for free access to a treasure trove of resources!

Designing the User Interface

With the logic in place, it’s time to craft the interface. The component template includes buttons to start and stop listening, as well as a transcript display:

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

Bringing It All Together in Nuxt

To use the voice search component, import it into your app’s main page. Open pages/index.vue and replace its contents with:

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

Link the Transcript to a Search : Add a button to perform a search based on the transcript:

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

With just a few lines of code, you’ve transformed your Nuxt 3 app into a cutting-edge tool that listens to users’ voices. Voice search isn’t just a trendy feature—it’s a testament to the power of modern web APIs and their ability to make technology more accessible and interactive.

By embracing tools like the Web Speech API, you’re not just building apps; you’re shaping the future of user interactions. So go ahead, deploy your app, and let your users experience the magic of voice search.

For more tips on web development, check out DailySandbox and sign up for our free newsletter to stay ahead of the curve!

The above is the detailed content of Add a Voice Search to your Nuxtpp in asy Steps. For more information, please follow other related articles on the PHP Chinese website!