@vapi-ai/web 1.0.137 → 1.0.139

package/dist/player.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="node" />
 import EventEmitter from "events";
 export declare class ContinuousPlayer extends EventEmitter {
-    private atomic;
-    private audio;
+    private audioCtx;
+    private source;
     constructor();
     start(): void;
-    playChunk(audioData: ArrayBuffer): void;
+    playChunk(audioData: ArrayBuffer): Promise<void>;
     clear(): void;
 }

package/dist/player.js

@@ -1,38 +1,37 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContinuousPlayer = void 0;
-const AtomicMediaSource_1 = __importDefault(require("./AtomicMediaSource"));
 const events_1 = __importDefault(require("events"));
 class ContinuousPlayer extends events_1.default {
     constructor() {
         super();
-        this.audio = document.createElement("audio");
-        this.audio.addEventListener("playing", () => this.emit("speech-start"));
-        this.audio.addEventListener("play", () => this.emit("speech-start"));
-        this.audio.addEventListener("canplay", () => {
-            this.audio.play();
-        });
-        this.audio.addEventListener("waiting", () => this.emit("speech-end"));
-        this.atomic = new AtomicMediaSource_1.default();
-        this.audio.src = URL.createObjectURL(this.atomic.mediaSource);
-        document.body.appendChild(this.audio);
-    }
-    start() {
-        this.audio.play();
+        this.source = null;
+        this.audioCtx = new AudioContext();
     }
+    start() { }
     playChunk(audioData) {
-        var _a;
-        (_a = this.atomic.sourceBuffer) === null || _a === void 0 ? void 0 : _a.addEventListener("updateend", () => {
-            this.audio.play().catch((error) => console.error("Play error:", error));
-        }, { once: true });
-        this.atomic.appendBuffer(audioData);
-    }
-    clear() {
-        this.audio.pause();
-        this.atomic.clearBuffer();
+        return __awaiter(this, void 0, void 0, function* () {
+            const audioBuffer = yield this.audioCtx.decodeAudioData(audioData);
+            this.source = this.audioCtx.createBufferSource();
+            this.source.buffer = audioBuffer;
+            this.source.connect(this.audioCtx.destination);
+            this.source.start();
+            this.emit("speech-start");
+            this.source.onended = () => this.emit("speech-end");
+        });
     }
+    clear() { }
 }
 exports.ContinuousPlayer = ContinuousPlayer;

package/dist/vapi.d.ts

@@ -1,12 +1,15 @@
-/// <reference types="node" />
 import { CreateAssistantDTO } from "./api";
-import EventEmitter from "events";
-export default class Vapi extends EventEmitter {
+import async from "async";
+export default class Vapi {
+    private audioContext;
+    private source;
     private started;
     private ws;
     private mediaRecorder;
-    private player;
-    constructor(apiToken: string, apiBaseUrl?: string);
+    private nextClipTime;
+    private decodeQueue;
+    constructor(apiToken: string);
+    createQueue(): async.QueueObject<ArrayBuffer>;
     start(assistant: CreateAssistantDTO | string): void;
     private startRecording;
     private onMessage;

package/dist/vapi.js

@@ -3,32 +3,48 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const player_1 = require("./player");
-const events_1 = __importDefault(require("events"));
+const standardized_audio_context_1 = require("standardized-audio-context");
+const async_1 = __importDefault(require("async"));
 const client_1 = require("./client");
 const base64_arraybuffer_1 = require("base64-arraybuffer");
-class Vapi extends events_1.default {
-    constructor(apiToken, apiBaseUrl) {
-        super();
+class Vapi {
+    constructor(apiToken) {
+        this.audioContext = new standardized_audio_context_1.AudioContext();
+        this.source = null;
         this.started = false;
         this.ws = null;
         this.mediaRecorder = null;
-        client_1.client.baseUrl = apiBaseUrl !== null && apiBaseUrl !== void 0 ? apiBaseUrl : "https://api.vapi.ai";
+        this.nextClipTime = 0;
         client_1.client.setSecurityData(apiToken);
-        this.player = new player_1.ContinuousPlayer();
-        this.player.on("speech-start", () => this.emit("speech-start"));
-        this.player.on("speech-end", () => this.emit("speech-end"));
+        this.decodeQueue = this.createQueue();
+    }
+    createQueue() {
+        return async_1.default.queue((task, callback) => {
+            this.source = this.audioContext.createBufferSource();
+            this.audioContext.decodeAudioData(task, (buffer) => {
+                if (!this.source)
+                    return;
+                this.source.buffer = buffer;
+                this.source.connect(this.audioContext.destination);
+                // If the next clip time is in the past, set it to the current time
+                this.nextClipTime = Math.max(this.nextClipTime, this.audioContext.currentTime);
+                // Start the source at the next clip time
+                this.source.start(this.nextClipTime);
+                // Schedule the next clip time
+                this.nextClipTime += buffer.duration;
+                callback();
+            });
+        }, 1);
     }
     start(assistant) {
         if (this.started) {
             return;
         }
         this.started = true;
-        this.player.start();
         client_1.client.call
             .callControllerCreateWebCall({
-            assistant: typeof assistant === "string" ? undefined : assistant,
             assistantId: typeof assistant === "string" ? assistant : undefined,
+            assistant: typeof assistant === "object" ? assistant : undefined,
         })
             .then(({ data }) => {
             const { callId, url } = data;
@@ -36,6 +52,7 @@ class Vapi extends events_1.default {
             this.ws = socket;
             socket.onopen = () => {
                 socket.send(JSON.stringify({ event: "start", callId }));
+                this.startRecording();
             };
             socket.onmessage = (event) => {
                 if (!socket)
@@ -55,33 +72,40 @@ class Vapi extends events_1.default {
             this.mediaRecorder = new MediaRecorder(stream, {
                 mimeType: "audio/webm;codecs=opus",
             });
+            this.mediaRecorder.start(100);
             this.mediaRecorder.ondataavailable = (event) => {
                 if (this.ws && this.ws.readyState === WebSocket.OPEN) {
                     this.ws.send(event.data);
                 }
             };
-            this.mediaRecorder.start(100);
         });
     }
     onMessage(ws, event) {
         const data = JSON.parse(event.data);
-        switch (data.event) {
-            case "connected":
-                this.startRecording();
-                this.emit("started");
-                break;
-            case "clear":
-                this.clear();
-                break;
-            case "media":
-                const audioData = (0, base64_arraybuffer_1.decode)(data.media.payload);
-                this.player.playChunk(audioData);
+        if (data.event === "media") {
+            const audioData = (0, base64_arraybuffer_1.decode)(data.media.payload);
+            this.decodeQueue.push(audioData);
+        }
+        if (data.event === "clear") {
+            this.clear();
         }
     }
     clear() {
-        this.player.clear();
+        this.decodeQueue.kill();
+        this.decodeQueue = this.createQueue();
+        // Stop the source if it exists
+        if (this.source) {
+            this.source.stop();
+            this.source.disconnect();
+            this.source = null;
+        }
+        // Reset the next clip time
+        this.nextClipTime = 0;
     }
     stop() {
+        if (this.source) {
+            this.source.stop();
+        }
         this.started = false;
         if (this.ws) {
             this.ws.close();
@@ -91,7 +115,6 @@ class Vapi extends events_1.default {
             this.mediaRecorder.stop();
         }
         this.mediaRecorder = null;
-        this.emit("stopped");
     }
 }
 exports.default = Vapi;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vapi-ai/web",
-  "version": "1.0.137",
+  "version": "1.0.139",
   "description": "",
   "main": "dist/vapi.js",
   "types": "dist/vapi.d.ts",
@@ -24,7 +24,8 @@
   "dependencies": {
     "async": "^3.2.4",
     "base64-arraybuffer": "^1.0.2",
-    "events": "^3.3.0"
+    "events": "^3.3.0",
+    "standardized-audio-context": "^25.3.57"
   },
   "devDependencies": {
     "@types/async": "^3.2.21",

package/player.ts

@@ -2,45 +2,26 @@ import AtomicMediaSource from "./AtomicMediaSource";
 import EventEmitter from "events";
 
 export class ContinuousPlayer extends EventEmitter {
-  private atomic: AtomicMediaSource;
-  private audio: HTMLAudioElement;
+  private audioCtx: AudioContext;
+  private source: AudioBufferSourceNode | null = null;
 
   constructor() {
     super();
 
-    this.audio = document.createElement("audio");
-
-    this.audio.addEventListener("playing", () => this.emit("speech-start"));
-    this.audio.addEventListener("play", () => this.emit("speech-start"));
-    this.audio.addEventListener("canplay", () => {
-      this.audio.play();
-    });
-
-    this.audio.addEventListener("waiting", () => this.emit("speech-end"));
-
-    this.atomic = new AtomicMediaSource();
-
-    this.audio.src = URL.createObjectURL(this.atomic.mediaSource);
-    document.body.appendChild(this.audio);
+    this.audioCtx = new AudioContext();
   }
 
-  start() {
-    this.audio.play();
-  }
+  start() {}
 
-  playChunk(audioData: ArrayBuffer) {
-    this.atomic.sourceBuffer?.addEventListener(
-      "updateend",
-      () => {
-        this.audio.play().catch((error) => console.error("Play error:", error));
-      },
-      { once: true }
-    );
-    this.atomic.appendBuffer(audioData);
+  async playChunk(audioData: ArrayBuffer) {
+    const audioBuffer = await this.audioCtx.decodeAudioData(audioData);
+    this.source = this.audioCtx.createBufferSource();
+    this.source.buffer = audioBuffer;
+    this.source.connect(this.audioCtx.destination);
+    this.source.start();
+    this.emit("speech-start");
+    this.source.onended = () => this.emit("speech-end");
   }
 
-  clear() {
-    this.audio.pause();
-    this.atomic.clearBuffer();
-  }
+  clear() {}
 }

package/vapi.ts

@@ -1,23 +1,56 @@
-import { ContinuousPlayer } from "./player";
-import { CreateAssistantDTO } from "./api";
-import EventEmitter from "events";
+import { Assistant, CreateAssistantDTO } from "./api";
+import {
+  AudioContext,
+  IAudioBufferSourceNode,
+  IAudioContext,
+} from "standardized-audio-context";
+import async, { QueueObject } from "async";
+
 import { client } from "./client";
 import { decode } from "base64-arraybuffer";
 
-export default class Vapi extends EventEmitter {
+export default class Vapi {
+  private audioContext: AudioContext = new AudioContext();
+  private source: IAudioBufferSourceNode<IAudioContext> | null = null;
   private started: boolean = false;
   private ws: WebSocket | null = null;
   private mediaRecorder: MediaRecorder | null = null;
-  private player: ContinuousPlayer;
 
-  constructor(apiToken: string, apiBaseUrl?: string) {
-    super();
-    client.baseUrl = apiBaseUrl ?? "https://api.vapi.ai";
+  private nextClipTime: number = 0;
+
+  private decodeQueue: QueueObject<ArrayBuffer>;
+
+  constructor(apiToken: string) {
     client.setSecurityData(apiToken);
-    this.player = new ContinuousPlayer();
 
-    this.player.on("speech-start", () => this.emit("speech-start"));
-    this.player.on("speech-end", () => this.emit("speech-end"));
+    this.decodeQueue = this.createQueue();
+  }
+
+  createQueue() {
+    return async.queue<ArrayBuffer>((task, callback) => {
+      this.source = this.audioContext.createBufferSource();
+
+      this.audioContext.decodeAudioData(task, (buffer) => {
+        if (!this.source) return;
+
+        this.source.buffer = buffer;
+        this.source.connect(this.audioContext.destination);
+
+        // If the next clip time is in the past, set it to the current time
+        this.nextClipTime = Math.max(
+          this.nextClipTime,
+          this.audioContext.currentTime
+        );
+
+        // Start the source at the next clip time
+        this.source.start(this.nextClipTime);
+
+        // Schedule the next clip time
+        this.nextClipTime += buffer.duration;
+
+        callback();
+      });
+    }, 1);
   }
 
   start(assistant: CreateAssistantDTO | string): void {
@@ -26,12 +59,11 @@ export default class Vapi extends EventEmitter {
     }
 
     this.started = true;
-    this.player.start();
 
     client.call
       .callControllerCreateWebCall({
-        assistant: typeof assistant === "string" ? undefined : assistant,
         assistantId: typeof assistant === "string" ? assistant : undefined,
+        assistant: typeof assistant === "object" ? assistant : undefined,
       })
       .then(({ data }) => {
         const { callId, url } = data;
@@ -41,6 +73,7 @@ export default class Vapi extends EventEmitter {
 
         socket.onopen = () => {
           socket.send(JSON.stringify({ event: "start", callId }));
+          this.startRecording();
         };
         socket.onmessage = (event) => {
           if (!socket) return;
@@ -61,37 +94,45 @@ export default class Vapi extends EventEmitter {
         mimeType: "audio/webm;codecs=opus",
       });
 
+      this.mediaRecorder.start(100);
       this.mediaRecorder.ondataavailable = (event: BlobEvent) => {
         if (this.ws && this.ws.readyState === WebSocket.OPEN) {
           this.ws.send(event.data);
         }
       };
-      this.mediaRecorder.start(100);
     });
   }
 
   private onMessage(ws: WebSocket, event: MessageEvent): void {
     const data = JSON.parse(event.data);
-
-    switch (data.event) {
-      case "connected":
-        this.startRecording();
-        this.emit("started");
-        break;
-      case "clear":
-        this.clear();
-        break;
-      case "media":
-        const audioData = decode(data.media.payload);
-        this.player.playChunk(audioData);
+    if (data.event === "media") {
+      const audioData = decode(data.media.payload);
+      this.decodeQueue.push(audioData);
+    }
+    if (data.event === "clear") {
+      this.clear();
     }
   }
 
   clear(): void {
-    this.player.clear();
+    this.decodeQueue.kill();
+    this.decodeQueue = this.createQueue();
+
+    // Stop the source if it exists
+    if (this.source) {
+      this.source.stop();
+      this.source.disconnect();
+      this.source = null;
+    }
+
+    // Reset the next clip time
+    this.nextClipTime = 0;
   }
 
   stop(): void {
+    if (this.source) {
+      this.source.stop();
+    }
     this.started = false;
     if (this.ws) {
       this.ws.close();
@@ -101,6 +142,5 @@ export default class Vapi extends EventEmitter {
       this.mediaRecorder.stop();
     }
     this.mediaRecorder = null;
-    this.emit("stopped");
   }
 }