การตั้งค่า
ใช้หน้านี้สำหรับการตั้งค่า Web SDK เบื้องต้น @sorisdk/web-audio ทำงานใน เบราว์เซอร์ โดยความแตกต่างหลักคือคุณจะติดตั้งผ่านตัวจัดการแพ็กเกจ หรือจะใช้ ชุดสคริปต์แบบสแตนด์อโลนในภายหลัง
ขณะนี้ Web SDK อยู่ในสถานะ เบต้า ดังนั้นรายละเอียดการตั้งค่าอาจเปลี่ยนแปลง ตามการพัฒนาของแพ็กเกจ
การตั้งค่าด้วยตัวจัดการแพ็กเกจ
bash
npm install @sorisdk/web-audiobash
yarn add @sorisdk/web-audiobash
pnpm add @sorisdk/web-audiobash
bun add @sorisdk/web-audioตัวโหลด Wasm สำหรับแอปที่ใช้เฟรมเวิร์ก
หากคุณใช้เฟรมเวิร์กที่ทำงานบน Vite เช่น React, Vue, Svelte หรือ Nuxt ให้เพิ่ม vite-plugin-wasm และลงทะเบียน wasm() ในการกำหนดค่าของเฟรมเวิร์ก
bash
npm install -D vite-plugin-wasmts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import wasm from "vite-plugin-wasm";
export default defineConfig({
plugins: [react(), wasm()]
});ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import wasm from "vite-plugin-wasm";
export default defineConfig({
plugins: [vue(), wasm()]
});ts
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import wasm from "vite-plugin-wasm";
export default defineConfig({
plugins: [svelte(), wasm()]
});ts
import wasm from "vite-plugin-wasm";
export default defineNuxtConfig({
vite: {
plugins: [wasm()]
}
});การตั้งค่าเบราว์เซอร์ขั้นต่ำ
ts
import { AudioRecognizer } from "@sorisdk/web-audio";
const recognizer = new AudioRecognizer({
appId: "YOUR_APP_ID",
ephemeralKey: async () => {
const response = await fetch("/api/ephemeral-key", {
method: "POST"
});
if (!response.ok) {
throw new Error(`Ephemeral key request failed: HTTP ${response.status}`);
}
const { ephemeral_key } = await response.json();
return ephemeral_key;
}
});
recognizer.on("campaign", (event) => {
console.log(event.campaign);
});
await recognizer.start();ดูรูปแบบการออกและส่งต่อคีย์ได้ที่ คีย์ชั่วคราว
หมายเหตุ
@sorisdk/web-audioต้องทำงานในโค้ดฝั่งเบราว์เซอร์ ไม่ใช่ในรันไทม์ Node.js- โดยทั่วไป แอป Node.js ใช้สำหรับการติดตั้ง การบันเดิล SSR และตรรกะการส่งต่อที่เป็นทางเลือก
AudioRecognizerจัดการพื้นที่จัดเก็บเซสชันและการแคชแพ็กภายใน- รูปแบบที่แนะนำคือส่ง
ephemeralKeyเป็นสตริงหรือตัวจัดการแบบอะซิงโครนัส - แอปเฟรมเวิร์กที่ทำงานบน Vite ควรกำหนดค่า
vite-plugin-wasmก่อนนำเข้า SDK
แท็กสคริปต์แบบสแตนด์อโลน
เร็ว ๆ นี้
