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-audiobash
yarn add @sorisdk/web-audiobash
pnpm add @sorisdk/web-audiobash
bun add @sorisdk/web-audioWasm 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-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()]
}
});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-audiomust 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.
AudioRecognizermanages session storage and pack caching internally.- The recommended pattern is to provide
ephemeralKeyas a string or async handler. - Vite-based framework apps should configure
vite-plugin-wasmbefore importing the SDK.
Standalone Script Tag
Soon
