セットアップ

このページでは Web SDK の初期セットアップを説明します。 @sorisdk/web-audio はブラウザで動作し、主な違いはパッケージマネージャーで 導入するか、後で standalone script 配布を使うかです。

Web SDK は現在 Beta 段階のため、パッケージの進化に合わせてセットアップ 方法が一部変わる可能性があります。

パッケージマネージャーでのインストール

npm

npm install @sorisdk/web-audio

yarn

yarn add @sorisdk/web-audio

pnpm

pnpm add @sorisdk/web-audio

bun

bun add @sorisdk/web-audio

フレームワークアプリ向け Wasm ローダー

React、Vue、Svelte、Nuxt のような Vite ベースのフレームワークを使う場合は vite-plugin-wasm を追加し、フレームワーク設定に wasm() を登録してください。

npm install -D vite-plugin-wasm

React

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import wasm from "vite-plugin-wasm";

export default defineConfig({
  plugins: [react(), wasm()]
});

Vue

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import wasm from "vite-plugin-wasm";

export default defineConfig({
  plugins: [vue(), wasm()]
});

Svelte

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import wasm from "vite-plugin-wasm";

export default defineConfig({
  plugins: [svelte(), wasm()]
});

Nuxt

import wasm from "vite-plugin-wasm";

export default defineNuxtConfig({
  vite: {
    plugins: [wasm()]
  }
});

最小ブラウザセットアップ

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();

キー発行とrelayパターンは Ephemeral Key を参照してください。

注意点

• @sorisdk/web-audio は Node.js ランタイムではなく、ブラウザコードで実行する必要があります。
• Node.js アプリは主にインストール、バンドル、SSR、任意のrelayロジックに使われます。
• AudioRecognizer は session storage と pack caching を内部的に管理します。
• 推奨パターンは ephemeralKey に文字列または async handler を渡す方法です。
• Vite ベースのフレームワークアプリでは、SDK を import する前に vite-plugin-wasm を設定してください。

Standalone スクリプトタグ

Soon