@vapi-ai/web 1.0.140 → 1.0.141

package/dist/player.d.ts

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

package/dist/player.js

@@ -1,37 +1,38 @@
 "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.source = null;
-        this.audioCtx = new AudioContext();
+        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();
     }
-    start() { }
     playChunk(audioData) {
-        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");
-        });
+        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();
     }
-    clear() { }
 }
 exports.ContinuousPlayer = ContinuousPlayer;

package/dist/vapi.d.ts

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

package/dist/vapi.js

@@ -3,49 +3,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const standardized_audio_context_1 = require("standardized-audio-context");
-const async_1 = __importDefault(require("async"));
+const player_1 = require("./player");
+const events_1 = __importDefault(require("events"));
 const client_1 = require("./client");
 const base64_arraybuffer_1 = require("base64-arraybuffer");
-class Vapi {
-    constructor(apiToken, apiUrl) {
-        this.audioContext = new standardized_audio_context_1.AudioContext();
-        this.source = null;
+class Vapi extends events_1.default {
+    constructor(apiToken, apiBaseUrl) {
+        super();
         this.started = false;
         this.ws = null;
         this.mediaRecorder = null;
-        this.nextClipTime = 0;
+        client_1.client.baseUrl = apiBaseUrl !== null && apiBaseUrl !== void 0 ? apiBaseUrl : "https://api.vapi.ai";
         client_1.client.setSecurityData(apiToken);
-        client_1.client.baseUrl = apiUrl !== null && apiUrl !== void 0 ? apiUrl : "https://api.vapi.ai";
-        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);
+        this.player = new player_1.ContinuousPlayer();
+        this.player.on("speech-start", () => this.emit("speech-start"));
+        this.player.on("speech-end", () => this.emit("speech-end"));
     }
     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;
@@ -53,7 +36,6 @@ class Vapi {
             this.ws = socket;
             socket.onopen = () => {
                 socket.send(JSON.stringify({ event: "start", callId }));
-                this.startRecording();
             };
             socket.onmessage = (event) => {
                 if (!socket)
@@ -73,40 +55,33 @@ class Vapi {
             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);
-        if (data.event === "media") {
-            const audioData = (0, base64_arraybuffer_1.decode)(data.media.payload);
-            this.decodeQueue.push(audioData);
-        }
-        if (data.event === "clear") {
-            this.clear();
+        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);
         }
     }
     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;
+        this.player.clear();
     }
     stop() {
-        if (this.source) {
-            this.source.stop();
-        }
         this.started = false;
         if (this.ws) {
             this.ws.close();
@@ -116,6 +91,7 @@ class Vapi {
             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.140",
+  "version": "1.0.141",
   "description": "",
   "main": "dist/vapi.js",
   "types": "dist/vapi.d.ts",

package/player.ts

@@ -2,26 +2,45 @@ import AtomicMediaSource from "./AtomicMediaSource";
 import EventEmitter from "events";
 
 export class ContinuousPlayer extends EventEmitter {
-  private audioCtx: AudioContext;
-  private source: AudioBufferSourceNode | null = null;
+  private atomic: AtomicMediaSource;
+  private audio: HTMLAudioElement;
 
   constructor() {
     super();
 
-    this.audioCtx = new AudioContext();
+    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);
   }
 
-  start() {}
+  start() {
+    this.audio.play();
+  }
 
-  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");
+  playChunk(audioData: ArrayBuffer) {
+    this.atomic.sourceBuffer?.addEventListener(
+      "updateend",
+      () => {
+        this.audio.play().catch((error) => console.error("Play error:", error));
+      },
+      { once: true }
+    );
+    this.atomic.appendBuffer(audioData);
   }
 
-  clear() {}
+  clear() {
+    this.audio.pause();
+    this.atomic.clearBuffer();
+  }
 }

package/vapi.ts

@@ -1,57 +1,23 @@
-import { Assistant, CreateAssistantDTO } from "./api";
-import {
-  AudioContext,
-  IAudioBufferSourceNode,
-  IAudioContext,
-} from "standardized-audio-context";
-import async, { QueueObject } from "async";
-
+import { ContinuousPlayer } from "./player";
+import { CreateAssistantDTO } from "./api";
+import EventEmitter from "events";
 import { client } from "./client";
 import { decode } from "base64-arraybuffer";
 
-export default class Vapi {
-  private audioContext: AudioContext = new AudioContext();
-  private source: IAudioBufferSourceNode<IAudioContext> | null = null;
+export default class Vapi extends EventEmitter {
   private started: boolean = false;
   private ws: WebSocket | null = null;
   private mediaRecorder: MediaRecorder | null = null;
+  private player: ContinuousPlayer;
 
-  private nextClipTime: number = 0;
-
-  private decodeQueue: QueueObject<ArrayBuffer>;
-
-  constructor(apiToken: string, apiUrl?: string) {
+  constructor(apiToken: string, apiBaseUrl?: string) {
+    super();
+    client.baseUrl = apiBaseUrl ?? "https://api.vapi.ai";
     client.setSecurityData(apiToken);
-    client.baseUrl = apiUrl ?? "https://api.vapi.ai";
-
-    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);
+    this.player = new ContinuousPlayer();
 
-        // Schedule the next clip time
-        this.nextClipTime += buffer.duration;
-
-        callback();
-      });
-    }, 1);
+    this.player.on("speech-start", () => this.emit("speech-start"));
+    this.player.on("speech-end", () => this.emit("speech-end"));
   }
 
   start(assistant: CreateAssistantDTO | string): void {
@@ -60,11 +26,12 @@ export default class Vapi {
     }
 
     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;
@@ -74,7 +41,6 @@ export default class Vapi {
 
         socket.onopen = () => {
           socket.send(JSON.stringify({ event: "start", callId }));
-          this.startRecording();
         };
         socket.onmessage = (event) => {
           if (!socket) return;
@@ -95,45 +61,37 @@ export default class Vapi {
         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);
-    if (data.event === "media") {
-      const audioData = decode(data.media.payload);
-      this.decodeQueue.push(audioData);
-    }
-    if (data.event === "clear") {
-      this.clear();
+
+    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);
     }
   }
 
   clear(): void {
-    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;
+    this.player.clear();
   }
 
   stop(): void {
-    if (this.source) {
-      this.source.stop();
-    }
     this.started = false;
     if (this.ws) {
       this.ws.close();
@@ -143,5 +101,6 @@ export default class Vapi {
       this.mediaRecorder.stop();
     }
     this.mediaRecorder = null;
+    this.emit("stopped");
   }
 }