간단한 단계로 Nuxtpp에 음성 검색을 추가하세요

"Hey Siri"와 "Okay Google"이 지배하는 세상에서 음성 검색을 웹 애플리케이션에 통합하는 것은 단순한 선택이 아니라 필수입니다. 사용자가 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개의 무료 코드 라이브러리

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에서 모든 것을 하나로 통합

음성 검색 구성요소를 사용하려면 앱의 메인 페이지로 가져오세요. 페이지/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 앱을 사용자의 목소리를 듣는 최첨단 도구로 변환했습니다. 음성 검색은 단순한 최신 기능이 아닙니다. 최신 웹 API의 강력한 성능과 기술의 접근성과 대화형 기능을 더욱 향상시키는 능력을 입증하는 것입니다.

Web Speech API와 같은 도구를 사용하면 단순히 앱을 만드는 것이 아닙니다. 사용자 상호작용의 미래를 만들어가고 있습니다. 이제 앱을 배포하여 사용자가 음성 검색의 마법을 경험하게 하세요.

웹 개발에 대한 더 많은 팁을 보려면 DailySandbox를 확인하고 무료 뉴스레터에 가입하여 앞서 나가세요!