在一个以“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>
要使用语音搜索组件，请将其导入应用程序的主页。打开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 并注册我们的免费时事通讯以保持领先地位！
以上是只需几个步骤即可将语音搜索添加到您的 Nuxtpp的详细内容。更多信息请关注PHP中文网其他相关文章！
