@vapi-ai/web 1.0.50 → 1.0.52

package/dist/player.d.ts

@@ -4,8 +4,8 @@ export declare class ContinuousPlayer extends EventEmitter {
     private mediaSource;
     private sourceBuffer;
     private audio;
-    private audioQueue;
     private nextTimestamp;
+    private audioQueue;
     constructor();
     start(): void;
     playChunk(audioData: ArrayBuffer): void;

package/dist/player.js

@@ -4,28 +4,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContinuousPlayer = void 0;
+const async_1 = __importDefault(require("async"));
 const events_1 = __importDefault(require("events"));
 class ContinuousPlayer extends events_1.default {
     constructor() {
         super();
         this.sourceBuffer = null;
-        this.audioQueue = [];
         this.nextTimestamp = 0;
         this.mediaSource = new MediaSource();
         this.audio = document.createElement("audio");
         this.audio.src = URL.createObjectURL(this.mediaSource);
         document.body.appendChild(this.audio);
+        this.audioQueue = async_1.default.queue((task, callback) => {
+            this.appendNextChunk(task, callback);
+        }, 1);
         this.mediaSource.addEventListener("sourceopen", () => {
             this.sourceBuffer = this.mediaSource.addSourceBuffer('audio/webm; codecs="opus"');
             this.sourceBuffer.addEventListener("updateend", () => {
-                if (!this.sourceBuffer)
-                    return;
-                if (this.sourceBuffer.buffered.length > 0) {
-                    const lastBufferedIndex = this.sourceBuffer.buffered.length - 1;
-                    this.sourceBuffer.timestampOffset =
-                        this.sourceBuffer.buffered.end(lastBufferedIndex);
+                if (this.sourceBuffer && this.sourceBuffer.buffered.length > 0) {
+                    this.sourceBuffer.timestampOffset = this.sourceBuffer.buffered.end(this.sourceBuffer.buffered.length - 1);
                 }
-                this.appendNextChunk();
+                this.audioQueue.resume();
             });
         });
     }
@@ -34,18 +33,14 @@ class ContinuousPlayer extends events_1.default {
     }
     playChunk(audioData) {
         this.audioQueue.push(audioData);
-        this.appendNextChunk();
     }
-    appendNextChunk() {
-        if (this.sourceBuffer &&
-            !this.sourceBuffer.updating &&
-            this.audioQueue.length > 0) {
-            const chunk = this.audioQueue.shift();
-            if (chunk) {
-                console.log("appending", this.sourceBuffer.timestampOffset);
-                this.sourceBuffer.appendBuffer(chunk);
-            }
+    appendNextChunk(chunk, callback) {
+        if (this.sourceBuffer && !this.sourceBuffer.updating) {
+            console.log("appending", this.sourceBuffer.timestampOffset);
+            this.sourceBuffer.appendBuffer(chunk);
+            this.audioQueue.pause();
         }
+        callback(null);
     }
     clear() {
         if (this.sourceBuffer) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vapi-ai/web",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "description": "",
   "main": "dist/vapi.js",
   "types": "dist/vapi.d.ts",

package/player.ts

@@ -1,11 +1,13 @@
+import async, { QueueObject } from "async";
+
 import EventEmitter from "events";
 
 export class ContinuousPlayer extends EventEmitter {
   private mediaSource: MediaSource;
   private sourceBuffer: SourceBuffer | null = null;
   private audio: HTMLAudioElement;
-  private audioQueue: ArrayBuffer[] = [];
   private nextTimestamp: number = 0;
+  private audioQueue: QueueObject<ArrayBuffer>;
 
   constructor() {
     super();
@@ -15,19 +17,22 @@ export class ContinuousPlayer extends EventEmitter {
     this.audio.src = URL.createObjectURL(this.mediaSource);
     document.body.appendChild(this.audio);
 
+    this.audioQueue = async.queue((task, callback) => {
+      this.appendNextChunk(task, callback);
+    }, 1);
+
     this.mediaSource.addEventListener("sourceopen", () => {
       this.sourceBuffer = this.mediaSource.addSourceBuffer(
         'audio/webm; codecs="opus"'
       );
 
       this.sourceBuffer.addEventListener("updateend", () => {
-        if (!this.sourceBuffer) return;
-        if (this.sourceBuffer.buffered.length > 0) {
-          const lastBufferedIndex = this.sourceBuffer.buffered.length - 1;
-          this.sourceBuffer.timestampOffset =
-            this.sourceBuffer.buffered.end(lastBufferedIndex);
+        if (this.sourceBuffer && this.sourceBuffer.buffered.length > 0) {
+          this.sourceBuffer.timestampOffset = this.sourceBuffer.buffered.end(
+            this.sourceBuffer.buffered.length - 1
+          );
         }
-        this.appendNextChunk();
+        this.audioQueue.resume();
       });
     });
   }
@@ -38,22 +43,18 @@ export class ContinuousPlayer extends EventEmitter {
 
   playChunk(audioData: ArrayBuffer) {
     this.audioQueue.push(audioData);
-
-    this.appendNextChunk();
   }
 
-  private appendNextChunk(): void {
-    if (
-      this.sourceBuffer &&
-      !this.sourceBuffer.updating &&
-      this.audioQueue.length > 0
-    ) {
-      const chunk = this.audioQueue.shift();
-      if (chunk) {
-        console.log("appending", this.sourceBuffer.timestampOffset);
-        this.sourceBuffer.appendBuffer(chunk);
-      }
+  private appendNextChunk(
+    chunk: ArrayBuffer,
+    callback: async.ErrorCallback<Error>
+  ): void {
+    if (this.sourceBuffer && !this.sourceBuffer.updating) {
+      console.log("appending", this.sourceBuffer.timestampOffset);
+      this.sourceBuffer.appendBuffer(chunk);
+      this.audioQueue.pause();
     }
+    callback(null);
   }
 
   clear(): void {