Skip to content

Setup

Use this page for initial Web SDK setup. @sorisdk/web-audio runs in the browser, and the main difference is whether you install it through a package manager or use a standalone script distribution later.

The Web SDK is currently in Beta, so setup details may change as the package evolves.

Package Manager Setup

bash
npm install @sorisdk/web-audio
bash
yarn add @sorisdk/web-audio
bash
pnpm add @sorisdk/web-audio
bash
bun add @sorisdk/web-audio

Wasm Loader for Framework Apps

If you use a Vite-based framework such as React, Vue, Svelte, or Nuxt, add vite-plugin-wasm and register wasm() in the framework config.

bash
npm install -D vite-plugin-wasm
ts
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()]
  }
});

Minimal Browser Setup

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

For key issuance and relay patterns, see Ephemeral Key.

Notes

  • @sorisdk/web-audio must run in browser code, not in a Node.js runtime.
  • A Node.js app is typically used for installation, bundling, SSR, and optional relay logic.
  • AudioRecognizer manages session storage and pack caching internally.
  • The recommended pattern is to provide ephemeralKey as a string or async handler.
  • Vite-based framework apps should configure vite-plugin-wasm before importing the SDK.

Standalone Script Tag

Soon