From 39b4c36600d8e02e889c6b8ac5842c98b401e7e1 Mon Sep 17 00:00:00 2001
From: adrivelasco <adrivelasco.dev@gmail.com>
Date: Fri, 22 May 2026 17:47:50 -0400
Subject: [PATCH] fix: stranded audio elements when user ends the call

The SDK creates an <audio data-participant-id="..."> element per remote
participant via buildAudioPlayer and only removes it when Daily's
participant-left event fires (destroyAudioPlayer).

When the user ends the call via vapi.stop() -> call.destroy(), Daily
tears down the local client before the server delivers participant-left
for the bot, so destroyAudioPlayer never runs for it. The element stays
in the DOM with a dead MediaStream attached on srcObject, and a new one
is appended on the next call. Safari degrades audibly once enough
accumulate.

Sweeps every audio[data-participant-id] element on teardown and
explicitly releases the MediaStream reference (srcObject = null) so the
playback graph is freed immediately instead of waiting on GC. Runs in
both cleanup() and stop() so it covers the bot-ends-call path
(left-meeting -> cleanup) and the user-ends-call path (stop).
---
 vapi.ts | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/vapi.ts b/vapi.ts
index d4ff1b9bc..db7739e92 100644
--- a/vapi.ts
+++ b/vapi.ts
@@ -257,11 +257,22 @@ async function buildAudioPlayer(
   return player;
 }
 
+function teardownAudioPlayer(player: HTMLAudioElement) {
+  player.srcObject = null;                                                                                                                                      
+  player.remove();    
+}
+
 function destroyAudioPlayer(participantId: string) {
-  const player = document.querySelector(
-    `audio[data-participant-id="${participantId}"]`,
-  );
-  player?.remove();
+  const player = document.querySelector<HTMLAudioElement>(`audio[data-participant-id="${participantId}"]`);
+  if (player) {
+    teardownAudioPlayer(player)
+  };
+}
+
+function destroyAllAudioPlayers() {
+  document
+    .querySelectorAll<HTMLAudioElement>('audio[data-participant-id]')
+    .forEach(teardownAudioPlayer);
 }
 
 function subscribeToTracks(
@@ -346,6 +357,7 @@ export default class Vapi extends VapiEventEmitter {
       await this.call.destroy();
       this.call = null;
     }
+    destroyAllAudioPlayers();
     this.speakingTimeout = null;
   }
 
@@ -973,6 +985,7 @@ export default class Vapi extends VapiEventEmitter {
       await this.call.destroy();
       this.call = null;
     }
+    destroyAllAudioPlayers();
     this.speakingTimeout = null;
   }