在一個以「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中文網其他相關文章！
