@vapi-ai/web 1.0.62 → 1.0.63

package/README.md

@@ -24,7 +24,7 @@ Then, create a new instance of the Vapi class, passing your Client Token as a pa
 const vapi = new Vapi('your-web-token');
 ```
 
-You can start a new call by calling the `start` method and passing an `agent` object or `agentId`:
+You can start a new call by calling the `start` method and passing an `assistant` object or `assistantId`:
 
 ```javascript
 vapi.start({
@@ -34,7 +34,7 @@ vapi.start({
 });
 ```
 ```javascript
-vapi.start('your-agent-id');
+vapi.start('your-assistant-id');
 ```
 
 The `start` method will initiate a new call. 

package/api.ts

@@ -11,7 +11,7 @@
 
 export interface PhoneCallParams {
   callSid?: string;
-  status?: string[];
+  status?: string;
   customerPhoneNumber: string;
   twilioPhoneNumber: string;
   twilioAccountSid: string;
@@ -227,8 +227,8 @@ export interface PhoneNumber {
   stripeSubscriptionId?: string;
   number: string;
   assistantId?: string;
-  twilioAccountSid?: string;
-  twilioAuthToken?: string;
+  twilioAccountSid: string;
+  twilioAuthToken: string;
 }
 
 export interface ImportTwilioPhoneNumberDto {
@@ -266,22 +266,16 @@ export interface FullRequestParams extends Omit<RequestInit, "body"> {
   cancelToken?: CancelToken;
 }
 
-export type RequestParams = Omit<
-  FullRequestParams,
-  "body" | "method" | "query" | "path"
->;
+export type RequestParams = Omit<FullRequestParams, "body" | "method" | "query" | "path">;
 
 export interface ApiConfig<SecurityDataType = unknown> {
   baseUrl?: string;
   baseApiParams?: Omit<RequestParams, "baseUrl" | "cancelToken" | "signal">;
-  securityWorker?: (
-    securityData: SecurityDataType | null
-  ) => Promise<RequestParams | void> | RequestParams | void;
+  securityWorker?: (securityData: SecurityDataType | null) => Promise<RequestParams | void> | RequestParams | void;
   customFetch?: typeof fetch;
 }
 
-export interface HttpResponse<D extends unknown, E extends unknown = unknown>
-  extends Response {
+export interface HttpResponse<D extends unknown, E extends unknown = unknown> extends Response {
   data: D;
   error: E;
 }
@@ -300,8 +294,7 @@ export class HttpClient<SecurityDataType = unknown> {
   private securityData: SecurityDataType | null = null;
   private securityWorker?: ApiConfig<SecurityDataType>["securityWorker"];
   private abortControllers = new Map<CancelToken, AbortController>();
-  private customFetch = (...fetchParams: Parameters<typeof fetch>) =>
-    fetch(...fetchParams);
+  private customFetch = (...fetchParams: Parameters<typeof fetch>) => fetch(...fetchParams);
 
   private baseApiParams: RequestParams = {
     credentials: "same-origin",
@@ -320,9 +313,7 @@ export class HttpClient<SecurityDataType = unknown> {
 
   protected encodeQueryParam(key: string, value: any) {
     const encodedKey = encodeURIComponent(key);
-    return `${encodedKey}=${encodeURIComponent(
-      typeof value === "number" ? value : `${value}`
-    )}`;
+    return `${encodedKey}=${encodeURIComponent(typeof value === "number" ? value : `${value}`)}`;
   }
 
   protected addQueryParam(query: QueryParamsType, key: string) {
@@ -336,15 +327,9 @@ export class HttpClient<SecurityDataType = unknown> {
 
   protected toQueryString(rawQuery?: QueryParamsType): string {
     const query = rawQuery || {};
-    const keys = Object.keys(query).filter(
-      (key) => "undefined" !== typeof query[key]
-    );
+    const keys = Object.keys(query).filter((key) => "undefined" !== typeof query[key]);
     return keys
-      .map((key) =>
-        Array.isArray(query[key])
-          ? this.addArrayQueryParam(query, key)
-          : this.addQueryParam(query, key)
-      )
+      .map((key) => (Array.isArray(query[key]) ? this.addArrayQueryParam(query, key) : this.addQueryParam(query, key)))
       .join("&");
   }
 
@@ -355,13 +340,8 @@ export class HttpClient<SecurityDataType = unknown> {
 
   private contentFormatters: Record<ContentType, (input: any) => any> = {
     [ContentType.Json]: (input: any) =>
-      input !== null && (typeof input === "object" || typeof input === "string")
-        ? JSON.stringify(input)
-        : input,
-    [ContentType.Text]: (input: any) =>
-      input !== null && typeof input !== "string"
-        ? JSON.stringify(input)
-        : input,
+      input !== null && (typeof input === "object" || typeof input === "string") ? JSON.stringify(input) : input,
+    [ContentType.Text]: (input: any) => (input !== null && typeof input !== "string" ? JSON.stringify(input) : input),
     [ContentType.FormData]: (input: any) =>
       Object.keys(input || {}).reduce((formData, key) => {
         const property = input[key];
@@ -371,17 +351,14 @@ export class HttpClient<SecurityDataType = unknown> {
             ? property
             : typeof property === "object" && property !== null
             ? JSON.stringify(property)
-            : `${property}`
+            : `${property}`,
         );
         return formData;
       }, new FormData()),
     [ContentType.UrlEncoded]: (input: any) => this.toQueryString(input),
   };
 
-  protected mergeRequestParams(
-    params1: RequestParams,
-    params2?: RequestParams
-  ): RequestParams {
+  protected mergeRequestParams(params1: RequestParams, params2?: RequestParams): RequestParams {
     return {
       ...this.baseApiParams,
       ...params1,
@@ -394,9 +371,7 @@ export class HttpClient<SecurityDataType = unknown> {
     };
   }
 
-  protected createAbortSignal = (
-    cancelToken: CancelToken
-  ): AbortSignal | undefined => {
+  protected createAbortSignal = (cancelToken: CancelToken): AbortSignal | undefined => {
     if (this.abortControllers.has(cancelToken)) {
       const abortController = this.abortControllers.get(cancelToken);
       if (abortController) {
@@ -440,28 +415,15 @@ export class HttpClient<SecurityDataType = unknown> {
     const payloadFormatter = this.contentFormatters[type || ContentType.Json];
     const responseFormat = format || requestParams.format;
 
-    return this.customFetch(
-      `${baseUrl || this.baseUrl || ""}${path}${
-        queryString ? `?${queryString}` : ""
-      }`,
-      {
-        ...requestParams,
-        headers: {
-          ...(requestParams.headers || {}),
-          ...(type && type !== ContentType.FormData
-            ? { "Content-Type": type }
-            : {}),
-        },
-        signal:
-          (cancelToken
-            ? this.createAbortSignal(cancelToken)
-            : requestParams.signal) || null,
-        body:
-          typeof body === "undefined" || body === null
-            ? null
-            : payloadFormatter(body),
-      }
-    ).then(async (response) => {
+    return this.customFetch(`${baseUrl || this.baseUrl || ""}${path}${queryString ? `?${queryString}` : ""}`, {
+      ...requestParams,
+      headers: {
+        ...(requestParams.headers || {}),
+        ...(type && type !== ContentType.FormData ? { "Content-Type": type } : {}),
+      },
+      signal: (cancelToken ? this.createAbortSignal(cancelToken) : requestParams.signal) || null,
+      body: typeof body === "undefined" || body === null ? null : payloadFormatter(body),
+    }).then(async (response) => {
       const r = response as HttpResponse<T, E>;
       r.data = null as unknown as T;
       r.error = null as unknown as E;
@@ -499,9 +461,7 @@ export class HttpClient<SecurityDataType = unknown> {
  *
  * API for making voice assistants
  */
-export class Api<
-  SecurityDataType extends unknown,
-> extends HttpClient<SecurityDataType> {
+export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDataType> {
   call = {
     /**
      * No description
@@ -543,10 +503,7 @@ export class Api<
      * @summary Create Phone Call
      * @request POST:/call/phone
      */
-    callControllerCreatePhoneCall: (
-      data: CreateOutboundCallDto,
-      params: RequestParams = {}
-    ) =>
+    callControllerCreatePhoneCall: (data: CreateOutboundCallDto, params: RequestParams = {}) =>
       this.request<Call, any>({
         path: `/call/phone`,
         method: "POST",
@@ -564,10 +521,7 @@ export class Api<
      * @summary Create Web Call
      * @request POST:/call/web
      */
-    callControllerCreateWebCall: (
-      data: CreateWebCallDto,
-      params: RequestParams = {}
-    ) =>
+    callControllerCreateWebCall: (data: CreateWebCallDto, params: RequestParams = {}) =>
       this.request<WebCallResponseDto, any>({
         path: `/call/web`,
         method: "POST",
@@ -586,10 +540,7 @@ export class Api<
      * @summary Create Assistant
      * @request POST:/assistant
      */
-    assistantControllerCreate: (
-      data: CreateAssistantDTO,
-      params: RequestParams = {}
-    ) =>
+    assistantControllerCreate: (data: CreateAssistantDTO, params: RequestParams = {}) =>
       this.request<Assistant, any>({
         path: `/assistant`,
         method: "POST",
@@ -639,11 +590,7 @@ export class Api<
      * @summary Update Assistant
      * @request PATCH:/assistant/{id}
      */
-    assistantControllerUpdate: (
-      id: string,
-      data: UpdateAssistantDTO,
-      params: RequestParams = {}
-    ) =>
+    assistantControllerUpdate: (id: string, data: UpdateAssistantDTO, params: RequestParams = {}) =>
       this.request<Assistant, any>({
         path: `/assistant/${id}`,
         method: "PATCH",
@@ -677,10 +624,7 @@ export class Api<
      * @summary Buy Phone Number
      * @request POST:/phone-number/buy
      */
-    phoneNumberControllerBuy: (
-      data: BuyPhoneNumberDto,
-      params: RequestParams = {}
-    ) =>
+    phoneNumberControllerBuy: (data: BuyPhoneNumberDto, params: RequestParams = {}) =>
       this.request<PhoneNumber, any>({
         path: `/phone-number/buy`,
         method: "POST",
@@ -698,10 +642,7 @@ export class Api<
      * @summary Import Twilio Number
      * @request POST:/phone-number/import
      */
-    phoneNumberControllerImport: (
-      data: ImportTwilioPhoneNumberDto,
-      params: RequestParams = {}
-    ) =>
+    phoneNumberControllerImport: (data: ImportTwilioPhoneNumberDto, params: RequestParams = {}) =>
       this.request<PhoneNumber, any>({
         path: `/phone-number/import`,
         method: "POST",
@@ -751,11 +692,7 @@ export class Api<
      * @summary Update Phone Number
      * @request PATCH:/phone-number/{id}
      */
-    phoneNumberControllerUpdate: (
-      id: string,
-      data: UpdatePhoneNumberDto,
-      params: RequestParams = {}
-    ) =>
+    phoneNumberControllerUpdate: (id: string, data: UpdatePhoneNumberDto, params: RequestParams = {}) =>
       this.request<PhoneNumber, any>({
         path: `/phone-number/${id}`,
         method: "PATCH",

package/dist/api.d.ts

@@ -1,6 +1,6 @@
 export interface PhoneCallParams {
     callSid?: string;
-    status?: string[];
+    status?: string;
     customerPhoneNumber: string;
     twilioPhoneNumber: string;
     twilioAccountSid: string;
@@ -154,8 +154,8 @@ export interface PhoneNumber {
     stripeSubscriptionId?: string;
     number: string;
     assistantId?: string;
-    twilioAccountSid?: string;
-    twilioAuthToken?: string;
+    twilioAccountSid: string;
+    twilioAuthToken: string;
 }
 export interface ImportTwilioPhoneNumberDto {
     /** This is the area code of the phone number to purchase. */

package/dist/api.js

@@ -54,12 +54,8 @@ class HttpClient {
             this.securityData = data;
         };
         this.contentFormatters = {
-            [ContentType.Json]: (input) => input !== null && (typeof input === "object" || typeof input === "string")
-                ? JSON.stringify(input)
-                : input,
-            [ContentType.Text]: (input) => input !== null && typeof input !== "string"
-                ? JSON.stringify(input)
-                : input,
+            [ContentType.Json]: (input) => input !== null && (typeof input === "object" || typeof input === "string") ? JSON.stringify(input) : input,
+            [ContentType.Text]: (input) => (input !== null && typeof input !== "string" ? JSON.stringify(input) : input),
             [ContentType.FormData]: (input) => Object.keys(input || {}).reduce((formData, key) => {
                 const property = input[key];
                 formData.append(key, property instanceof Blob
@@ -100,13 +96,7 @@ class HttpClient {
             const queryString = query && this.toQueryString(query);
             const payloadFormatter = this.contentFormatters[type || ContentType.Json];
             const responseFormat = format || requestParams.format;
-            return this.customFetch(`${baseUrl || this.baseUrl || ""}${path}${queryString ? `?${queryString}` : ""}`, Object.assign(Object.assign({}, requestParams), { headers: Object.assign(Object.assign({}, (requestParams.headers || {})), (type && type !== ContentType.FormData
-                    ? { "Content-Type": type }
-                    : {})), signal: (cancelToken
-                    ? this.createAbortSignal(cancelToken)
-                    : requestParams.signal) || null, body: typeof body === "undefined" || body === null
-                    ? null
-                    : payloadFormatter(body) })).then((response) => __awaiter(this, void 0, void 0, function* () {
+            return this.customFetch(`${baseUrl || this.baseUrl || ""}${path}${queryString ? `?${queryString}` : ""}`, Object.assign(Object.assign({}, requestParams), { headers: Object.assign(Object.assign({}, (requestParams.headers || {})), (type && type !== ContentType.FormData ? { "Content-Type": type } : {})), signal: (cancelToken ? this.createAbortSignal(cancelToken) : requestParams.signal) || null, body: typeof body === "undefined" || body === null ? null : payloadFormatter(body) })).then((response) => __awaiter(this, void 0, void 0, function* () {
                 const r = response;
                 r.data = null;
                 r.error = null;
@@ -151,9 +141,7 @@ class HttpClient {
         const query = rawQuery || {};
         const keys = Object.keys(query).filter((key) => "undefined" !== typeof query[key]);
         return keys
-            .map((key) => Array.isArray(query[key])
-            ? this.addArrayQueryParam(query, key)
-            : this.addQueryParam(query, key))
+            .map((key) => (Array.isArray(query[key]) ? this.addArrayQueryParam(query, key) : this.addQueryParam(query, key)))
             .join("&");
     }
     addQueryParams(rawQuery) {

package/dist/player.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="node" />
 import EventEmitter from "events";
 export declare class ContinuousPlayer extends EventEmitter {
-    private audioCtx;
-    private nextStartTime;
+    private mediaSource;
+    private sourceBuffer;
+    private audio;
     private audioQueue;
-    private crossFadeDuration;
-    constructor(crossFadeDuration?: number);
-    private createQueue;
+    constructor();
+    start(): void;
     playChunk(audioData: ArrayBuffer): void;
-    clear(): Promise<void>;
+    private appendNextChunk;
+    clear(): void;
 }

package/dist/player.js

@@ -1,68 +1,59 @@
 "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 async_1 = require("async"); // You need to install the async package
+const async_1 = __importDefault(require("async"));
 const events_1 = __importDefault(require("events"));
 class ContinuousPlayer extends events_1.default {
-    constructor(crossFadeDuration = 0.5) {
+    constructor() {
         super();
-        this.audioCtx = new AudioContext();
-        this.nextStartTime = 0;
-        this.audioQueue = this.createQueue();
-        this.crossFadeDuration = crossFadeDuration;
-    }
-    createQueue() {
-        const q = (0, async_1.queue)((audioPromise, callback) => __awaiter(this, void 0, void 0, function* () {
-            const audioBuffer = yield audioPromise;
-            const source = this.audioCtx.createBufferSource();
-            source.buffer = audioBuffer;
-            source.connect(this.audioCtx.destination);
-            // Create a gain node for crossfading
-            const gainNode = this.audioCtx.createGain();
-            source.connect(gainNode);
-            gainNode.connect(this.audioCtx.destination);
-            // Start the source at the next start time
-            source.start(this.nextStartTime);
-            // Schedule the crossfade
-            gainNode.gain.setValueAtTime(0, this.nextStartTime);
-            gainNode.gain.linearRampToValueAtTime(1, this.nextStartTime + this.crossFadeDuration);
-            gainNode.gain.setValueAtTime(1, this.nextStartTime + audioBuffer.duration - this.crossFadeDuration);
-            gainNode.gain.linearRampToValueAtTime(0, this.nextStartTime + audioBuffer.duration);
-            source.onended = () => {
-                this.nextStartTime += audioBuffer.duration;
-                callback();
-            };
-        }), 1);
-        q.drain(() => {
-            this.emit("speech-end");
-        });
-        q.saturated(() => {
-            this.emit("speech-start");
+        this.sourceBuffer = null;
+        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.mode = "sequence";
+            this.sourceBuffer.addEventListener("updateend", () => {
+                this.audioQueue.resume();
+                console.log("RESUMING");
+            });
         });
-        return q;
+    }
+    start() {
+        this.audio.play();
     }
     playChunk(audioData) {
-        const decodePromise = this.audioCtx.decodeAudioData(audioData);
-        this.audioQueue.push(decodePromise);
+        this.audioQueue.push(audioData);
+    }
+    appendNextChunk(chunk, callback) {
+        if (this.sourceBuffer && !this.sourceBuffer.updating) {
+            this.audioQueue.pause();
+            this.sourceBuffer.appendBuffer(chunk);
+        }
+        callback();
     }
     clear() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.audioQueue.kill();
-            this.audioQueue = this.createQueue();
-            this.nextStartTime = 0;
-        });
+        if (this.sourceBuffer) {
+            if (this.sourceBuffer.updating) {
+                this.sourceBuffer.addEventListener("updateend", () => this.clear(), {
+                    once: true,
+                });
+            }
+            else {
+                this.sourceBuffer.abort();
+                while (this.sourceBuffer.buffered.length > 0) {
+                    this.sourceBuffer.remove(0, this.sourceBuffer.buffered.end(0));
+                }
+            }
+            this.sourceBuffer.timestampOffset = 0;
+        }
     }
 }
 exports.ContinuousPlayer = ContinuousPlayer;

package/dist/vapi.d.ts

@@ -7,7 +7,7 @@ export default class Vapi extends EventEmitter {
     private mediaRecorder;
     private player;
     constructor(apiToken: string);
-    start(agent: CreateAssistantDTO | string): void;
+    start(assistant: CreateAssistantDTO | string): void;
     private startRecording;
     private onMessage;
     clear(): void;

package/dist/vapi.js

@@ -18,15 +18,16 @@ class Vapi extends events_1.default {
         this.player.on("speech-start", () => this.emit("speech-start"));
         this.player.on("speech-end", () => this.emit("speech-end"));
     }
-    start(agent) {
+    start(assistant) {
         if (this.started) {
             return;
         }
         this.started = true;
+        this.player.start();
         client_1.client.call
             .callControllerCreateWebCall({
-            assistant: typeof agent === "string" ? undefined : agent,
-            assistantId: typeof agent === "string" ? agent : undefined,
+            assistant: typeof assistant === "string" ? undefined : assistant,
+            assistantId: typeof assistant === "string" ? assistant : undefined,
         })
             .then(({ data }) => {
             const { callId, url } = data;

package/package.json

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

package/player.ts

@@ -1,78 +1,70 @@
-import { QueueObject, queue } from "async"; // You need to install the async package
+import async, { QueueObject } from "async";
 
 import EventEmitter from "events";
 
 export class ContinuousPlayer extends EventEmitter {
-  private audioCtx: AudioContext;
-  private nextStartTime: number;
-  private audioQueue: QueueObject<Promise<AudioBuffer>>;
-  private crossFadeDuration: number; // Duration of the crossfade
+  private mediaSource: MediaSource;
+  private sourceBuffer: SourceBuffer | null = null;
+  private audio: HTMLAudioElement;
+  private audioQueue: QueueObject<ArrayBuffer>;
 
-  constructor(crossFadeDuration = 0.5) {
+  constructor() {
     super();
-    this.audioCtx = new AudioContext();
-    this.nextStartTime = 0;
-    this.audioQueue = this.createQueue();
-    this.crossFadeDuration = crossFadeDuration;
-  }
-
-  private createQueue() {
-    const q = queue(
-      async (audioPromise: Promise<AudioBuffer>, callback: Function) => {
-        const audioBuffer = await audioPromise;
-        const source = this.audioCtx.createBufferSource();
-        source.buffer = audioBuffer;
-        source.connect(this.audioCtx.destination);
+    this.mediaSource = new MediaSource();
 
-        // Create a gain node for crossfading
-        const gainNode = this.audioCtx.createGain();
-        source.connect(gainNode);
-        gainNode.connect(this.audioCtx.destination);
+    this.audio = document.createElement("audio");
+    this.audio.src = URL.createObjectURL(this.mediaSource);
+    document.body.appendChild(this.audio);
 
-        // Start the source at the next start time
-        source.start(this.nextStartTime);
+    this.audioQueue = async.queue((task, callback) => {
+      this.appendNextChunk(task, callback);
+    }, 1);
 
-        // Schedule the crossfade
-        gainNode.gain.setValueAtTime(0, this.nextStartTime);
-        gainNode.gain.linearRampToValueAtTime(
-          1,
-          this.nextStartTime + this.crossFadeDuration
-        );
-        gainNode.gain.setValueAtTime(
-          1,
-          this.nextStartTime + audioBuffer.duration - this.crossFadeDuration
-        );
-        gainNode.gain.linearRampToValueAtTime(
-          0,
-          this.nextStartTime + audioBuffer.duration
-        );
+    this.mediaSource.addEventListener("sourceopen", () => {
+      this.sourceBuffer = this.mediaSource.addSourceBuffer(
+        'audio/webm; codecs="opus"'
+      );
+      this.sourceBuffer.mode = "sequence";
 
-        source.onended = () => {
-          this.nextStartTime += audioBuffer.duration;
-          callback();
-        };
-      },
-      1
-    );
-
-    q.drain(() => {
-      this.emit("speech-end");
-    });
-    q.saturated(() => {
-      this.emit("speech-start");
+      this.sourceBuffer.addEventListener("updateend", () => {
+        this.audioQueue.resume();
+        console.log("RESUMING");
+      });
     });
+  }
 
-    return q;
+  start() {
+    this.audio.play();
   }
 
   playChunk(audioData: ArrayBuffer) {
-    const decodePromise = this.audioCtx.decodeAudioData(audioData);
-    this.audioQueue.push(decodePromise);
+    this.audioQueue.push(audioData);
+  }
+
+  private appendNextChunk(
+    chunk: ArrayBuffer,
+    callback: async.ErrorCallback<Error>
+  ): void {
+    if (this.sourceBuffer && !this.sourceBuffer.updating) {
+      this.audioQueue.pause();
+      this.sourceBuffer.appendBuffer(chunk);
+    }
+    callback();
   }
 
-  async clear() {
-    this.audioQueue.kill();
-    this.audioQueue = this.createQueue();
-    this.nextStartTime = 0;
+  clear(): void {
+    if (this.sourceBuffer) {
+      if (this.sourceBuffer.updating) {
+        this.sourceBuffer.addEventListener("updateend", () => this.clear(), {
+          once: true,
+        });
+      } else {
+        this.sourceBuffer.abort();
+        while (this.sourceBuffer.buffered.length > 0) {
+          this.sourceBuffer.remove(0, this.sourceBuffer.buffered.end(0));
+        }
+      }
+      this.sourceBuffer.timestampOffset = 0;
+    }
   }
 }

package/vapi.ts

@@ -19,17 +19,18 @@ export default class Vapi extends EventEmitter {
     this.player.on("speech-end", () => this.emit("speech-end"));
   }
 
-  start(agent: CreateAssistantDTO | string): void {
+  start(assistant: CreateAssistantDTO | string): void {
     if (this.started) {
       return;
     }
 
     this.started = true;
+    this.player.start();
 
     client.call
       .callControllerCreateWebCall({
-        assistant: typeof agent === "string" ? undefined : agent,
-        assistantId: typeof agent === "string" ? agent : undefined,
+        assistant: typeof assistant === "string" ? undefined : assistant,
+        assistantId: typeof assistant === "string" ? assistant : undefined,
       })
       .then(({ data }) => {
         const { callId, url } = data;