🎙️ Speech Recognition SDK

React SDK สำหรับ Speech Recognition ใช้ Web Speech API พร้อม Widget สวยๆ ใช้งานง่าย

✨ Features

• 🎤 Speech to Text - แปลงเสียงพูดเป็นข้อความแบบ Real-time
• 🌏 รองรับภาษาไทย - ตั้งค่า th-TH ได้เลย
• 🎨 Floating Widget - ปุ่มลอยพร้อม Modal สวยงาม
• ⚡ React Hooks - ใช้งานง่ายด้วย useSpeechRecognition
• 📦 TypeScript - รองรับ TypeScript 100%
• 🔧 Customizable - ปรับแต่งได้ตามต้องการ

📦 Installation

npm install @poovit-banton/speech-recognition-sdk

หรือ

yarn add @poovit-banton/speech-recognition-sdk

🚀 Quick Start

วิธีที่ 1: ใช้ Widget (แนะนำ - ง่ายสุด)

แค่ครอบ App ด้วย SpeechProvider แล้วได้ปุ่มลอย + Modal มาเลย!

import { SpeechProvider } from "@poovit-banton/speech-recognition-sdk";

function App() {
  return (
    <SpeechProvider
      showWidget
      widgetEnabled
      widgetPosition="bottom-left"
      config={{ language: "th-TH" }}
      onGenerate={async (transcript) => {
        // เรียก API ของคุณตรงนี้
        const response = await fetch("/api/process", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ text: transcript }),
        });
        return await response.json();
      }}
      onGenerateComplete={(response) => {
        console.log("ผลลัพธ์:", response);
      }}
    >
      <YourApp />
    </SpeechProvider>
  );
}

วิธีที่ 2: ใช้ Hook (ยืดหยุ่นกว่า)

import { useSpeechRecognition } from "@poovit-banton/speech-recognition-sdk";

function MyComponent() {
  const {
    transcript, // ข้อความที่พูด
    isListening, // กำลังฟังอยู่ไหม
    isSupported, // browser รองรับไหม
    startListening, // เริ่มฟัง
    stopListening, // หยุดฟัง
    resetTranscript, // ล้างข้อความ
  } = useSpeechRecognition({
    config: { language: "th-TH" },
  });

  if (!isSupported) {
    return <p>Browser ไม่รองรับ Speech Recognition</p>;
  }

  return (
    <div>
      <button onClick={isListening ? stopListening : startListening}>
        {isListening ? "🛑 หยุด" : "🎤 เริ่มพูด"}
      </button>
      <p>{transcript}</p>
      <button onClick={resetTranscript}>ล้าง</button>
    </div>
  );
}

วิธีที่ 3: ควบคุม Widget จาก Component

import {
  SpeechProvider,
  useSpeechContext,
} from "@poovit-banton/speech-recognition-sdk";

function App() {
  return (
    <SpeechProvider showWidget widgetEnabled>
      <ControlPanel />
    </SpeechProvider>
  );
}

function ControlPanel() {
  const { isWidgetEnabled, toggleWidget } = useSpeechContext();

  return (
    <button onClick={toggleWidget}>
      {isWidgetEnabled ? "🔇 ปิด" : "🔊 เปิด"} Voice Widget
    </button>
  );
}

📖 API Reference

<SpeechProvider>

Provider component สำหรับครอบ App

| Prop | Type | Default | Description | | -------------------- | ------------------ | --------------------- | ----------------------------- | | showWidget | boolean | false | แสดง Floating Widget | | widgetEnabled | boolean | true | เปิด/ปิด Widget | | widgetPosition | string \| object | "bottom-left" | ตำแหน่ง Widget | | widgetButtonSize | number | 60 | ขนาดปุ่ม (px) | | config | object | {} | ตั้งค่า Speech Recognition | | onGenerate | function | - | Callback เมื่อกด Generate | | onGenerateComplete | function | - | Callback เมื่อ Generate เสร็จ | | onGenerateError | function | - | Callback เมื่อเกิด Error | | modalTitle | string | "AI Speech-to-Data" | หัวข้อ Modal | | generateButtonText | string | "Generate" | ข้อความปุ่ม Generate |

Widget Position Options

// Preset positions
widgetPosition="bottom-left"   // ซ้ายล่าง
widgetPosition="bottom-right"  // ขวาล่าง
widgetPosition="top-left"      // ซ้ายบน
widgetPosition="top-right"     // ขวาบน

// Custom position
widgetPosition={{ bottom: 20, left: 20 }}
widgetPosition={{ top: 100, right: 50 }}

useSpeechRecognition(options)

Hook สำหรับใช้งาน Speech Recognition

Options

const options = {
  config: {
    language: "th-TH", // ภาษา
    continuous: true, // ฟังต่อเนื่อง
    interimResults: true, // แสดงผลระหว่างพูด
  },
  callbacks: {
    onStart: () => {}, // เริ่มฟัง
    onEnd: () => {}, // หยุดฟัง
    onResult: (result) => {}, // ได้ผลลัพธ์
    onError: (error) => {}, // เกิด error
  },
};

Return Values

const {
  // State
  transcript, // string - ข้อความทั้งหมด
  interimTranscript, // string - ข้อความระหว่างพูด
  finalTranscript, // string - ข้อความที่ยืนยันแล้ว
  isListening, // boolean - กำลังฟังอยู่
  isSupported, // boolean - browser รองรับ
  isMicrophoneAvailable, // boolean - มีไมค์
  error, // string | null - error message

  // Actions
  startListening, // (config?) => Promise<void>
  stopListening, // () => void
  abortListening, // () => void
  resetTranscript, // () => void
} = useSpeechRecognition(options);

useSpeechContext()

Hook สำหรับเข้าถึง context ภายใน SpeechProvider

const {
  // ทุกอย่างจาก useSpeechRecognition +
  isWidgetEnabled, // boolean - Widget เปิดอยู่ไหม
  setWidgetEnabled, // (enabled: boolean) => void
  toggleWidget, // () => void
} = useSpeechContext();

Components

| Component | Description | | --------------------- | ----------------------- | | <SpeechWidget> | Floating button + Modal | | <SpeechButton> | ปุ่ม Microphone | | <SpeechModal> | Modal สำหรับพูด | | <TranscriptDisplay> | แสดงข้อความ |

🌍 Supported Languages

// ตั้งค่าภาษาใน config
config={{ language: 'th-TH' }}

| Code | Language | | ------- | ------------ | | th-TH | ไทย | | en-US | English (US) | | en-GB | English (UK) | | zh-CN | 中文 (简体) | | zh-TW | 中文 (繁體) | | ja-JP | 日本語 | | ko-KR | 한국어 | | vi-VN | Tiếng Việt |

🌐 Browser Support

| Browser | Support | | ------- | ---------------- | | Chrome | ✅ Full | | Edge | ✅ Full | | Safari | ⚠️ Partial | | Firefox | ❌ Not supported |

⚠️ Web Speech API ไม่รองรับทุก browser ควรเช็ค isSupported ก่อนใช้งาน

📝 Example: Full Integration

import React, { useState } from "react";
import {
  SpeechProvider,
  useSpeechContext,
} from "@poovit-banton/speech-recognition-sdk";

// Main App
function App() {
  const [results, setResults] = useState<string[]>([]);

  const handleGenerate = async (transcript: string) => {
    // เรียก API
    const response = await fetch("/api/ai/process", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ text: transcript }),
    });

    const data = await response.json();
    return data.result;
  };

  return (
    <SpeechProvider
      showWidget
      widgetEnabled
      widgetPosition="bottom-left"
      config={{ language: "th-TH", continuous: true }}
      modalTitle="พูดข้อความ"
      generateButtonText="สร้าง"
      onGenerate={handleGenerate}
      onGenerateComplete={(result) => {
        setResults((prev) => [...prev, result]);
      }}
      onGenerateError={(error) => {
        console.error("Error:", error);
      }}
    >
      <MainContent results={results} />
    </SpeechProvider>
  );
}

// Content Component
function MainContent({ results }: { results: string[] }) {
  const { isWidgetEnabled, toggleWidget } = useSpeechContext();

  return (
    <div style={{ padding: 20 }}>
      <h1>🎙️ Speech Recognition Demo</h1>

      <button onClick={toggleWidget}>
        {isWidgetEnabled ? "ปิด" : "เปิด"} Voice Widget
      </button>

      <h2>Results:</h2>
      <ul>
        {results.map((r, i) => (
          <li key={i}>{r}</li>
        ))}
      </ul>

      <p>👈 กดปุ่มไมค์ที่มุมซ้ายล่างเพื่อเริ่มพูด</p>
    </div>
  );
}

export default App;

🔧 Utilities

import {
  isSpeechRecognitionSupported,
  requestMicrophonePermission,
  getSupportedLanguages,
} from "@poovit-banton/speech-recognition-sdk";

// เช็คว่า browser รองรับไหม
if (isSpeechRecognitionSupported()) {
  console.log("รองรับ!");
}

// ขอ permission ไมค์
const hasPermission = await requestMicrophonePermission();

// ดูภาษาที่รองรับ
const languages = getSupportedLanguages();

📄 License

MIT © Poovit Banton

Made with ❤️ by DFM Team