簡単な手順で音声検索を Nuxtpp に追加します

「Hey Siri」と「OK 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 の Comboposition 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 は、ユーザーの入力とシステムの状態を追跡します。

---

2,228 無料 リソース 開発者向け!! ❤️ ?? _{(毎日更新)}

1400 の無料 HTML テンプレート

359 件の無料ニュース記事

69 個の無料 AI プロンプト

323 の無料コード ライブラリ

Node、Nuxt、Vue などの 52 の無料コード スニペットとボイラープレート!

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 をチェックし、無料のニュースレターに登録して時代の先を行きましょう!