只需几个步骤即可将语音搜索添加到您的 Nuxtpp

在一个以“Hey Siri”和“Okay Google”为主的世界中，将语音搜索集成到您的 Web 应用程序中不仅仅是一种选择，而是一种必然。想象一下，让您的用户能够免提与您的 Nuxt 3 应用程序进行交互，从而提供无缝且具有未来感的体验。通过利用 Web Speech API，我们会将您的应用程序转变为能够倾听、理解和做出反应的语音助手。

---

设置

首先，让我们准备您的 Nuxt 3 项目。如果您还没有，是时候开始了。启动您的终端并创建一个新的 Nuxt 3 应用程序：

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

这将启动 Nuxt 开发服务器。在浏览器中打开 http://localhost:3000，您应该会看到 Nuxt 欢迎页面。环境准备好后，我们准备引入一些语音魔法。

---

构建语音搜索组件

首先，让我们创建一个专用组件来处理语音识别。在组件目录中，创建一个名为 VoiceSearch.vue 的文件：

touch components/VoiceSearch.vue

该组件将管理一切：启动和停止麦克风、处理语音输入以及显示文字记录。在文件内，使用 Vue 的 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>

此设置会初始化 SpeechRecognition 实例、侦听结果并优雅地处理错误。反应变量transcript和isListening跟踪用户的输入和系统的状态。

---

2228 免费 资源 供开发者使用！ ❤️ ?? _{（每日更新）}

1400 个免费 HTML 模板

359 篇免费新闻文章

69 个免费 AI 提示

323 个免费代码库

52 个适用于 Node、Nuxt、Vue 等的免费代码片段和样板！

25 个免费开源图标库

访问 dailysandbox.pro 免费访问资源宝库！

---

设计用户界面

逻辑到位后，就可以设计界面了。组件模板包括开始和停止监听的按钮，以及文字记录显示：

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

---

将所有内容整合到 Nuxt 中

要使用语音搜索组件，请将其导入应用程序的主页。打开pages/index.vue并将其内容替换为：

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

将成绩单链接到搜索：添加一个按钮以根据成绩单执行搜索：

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

---

只需几行代码，您就可以将 Nuxt 3 应用程序转变为倾听用户声音的尖端工具。语音搜索不仅仅是一项流行功能，它证明了现代 Web API 的强大功能及其使技术更易于访问和交互的能力。

通过采用 Web Speech API 等工具，您不仅可以构建应用程序，还可以构建应用程序。您正在塑造用户交互的未来。因此，继续部署您的应用程序，让您的用户体验语音搜索的魔力。

有关 Web 开发的更多技巧，请查看 DailySandbox 并注册我们的免费时事通讯以保持领先地位！