只需幾個步驟即可將語音搜尋新增至您的 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 並註冊我們的免費時事通訊以保持領先地位！