I am getting some browser console errors while trying to connect the web call in my application

Support Help
1

connected to room web_call_25e320f92a8ebfa29672504a462
7903-ac507f85ad985740.js:1 [WebCallModal] call_ready fired — agent_audio track subscribed and attached
f9be0dd7-f04d-4ea9-81db-d203b43ac7f0:1 The AudioContext encountered an error from the audio device or the WebAudio renderer.
3dbccb2b-05ef1ee3bac9f8c1.js:1 publishing track {room: ‘web_call_25e320f92a8ebfa29672504a462’, roomID: ‘’, participant: ‘client’, pID: ‘PA_AeRzvJgVYLGB’, trackID: undefined, …}
7903-ac507f85ad985740.js:1 [WebCallModal] agent_start_talking fired
7903-ac507f85ad985740.js:1 [WebCallModal] agent_stop_talking fired
7903-ac507f85ad985740.js:1 [WebCallModal] agent_start_talking fired
7903-ac507f85ad985740.js:1 [WebCallModal] agent_stop_talking fired
7903-ac507f85ad985740.js:1 [WebCallModal] agent_start_talking fired
7903-ac507f85ad985740.js:1 [WebCallModal] agent_stop_talking fired
7903-ac507f85ad985740.js:1 [WebCallModal] agent_start_talking fired
7903-ac507f85ad985740.js:1 [WebCallModal] agent_stop_talking fired
7903-ac507f85ad985740.js:1 [WebCallModal] agent_start_talking fired
3dbccb2b-05ef1ee3bac9f8c1.js:1 disconnect from room {room: ‘web_call_25e320f92a8ebfa29672504a462’, roomID: ‘RM_LtYdkRG3aiDC’, participant: ‘client’, pID: ‘PA_AeRzvJgVYLGB’}
3dbccb2b-05ef1ee3bac9f8c1.js:1 could not playback audio {room: ‘web_call_25e320f92a8ebfa29672504a462’, roomID: ‘RM_LtYdkRG3aiDC’, participant: ‘client’, pID: ‘PA_AeRzvJgVYLGB’, error: AbortError: The play() request was interrupted by a new load request. DOMException - The play() request was interrupted  |  Blog  |  Chrome for Developers }
handleAudioPlaybackFailed @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
(anonymous) @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
o @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
Promise.then
c @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
(anonymous) @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
n2 @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
startAudio @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
r.emit @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
(anonymous) @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
(anonymous) @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
s @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
Promise.then
c @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
(anonymous) @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
n2 @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
createTracks @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
(anonymous) @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
(anonymous) @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
n2 @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
setTrackEnabled @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
setMicrophoneEnabled @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
(anonymous) @ 7903-ac507f85ad985740.js:1
Promise.then
(anonymous) @ 7903-ac507f85ad985740.js:1
n.startCall @ 7903-ac507f85ad985740.js:1
a @ 7903-ac507f85ad985740.js:1
await in a
(anonymous) @ 7903-ac507f85ad985740.js:1
setTimeout
(anonymous) @ 7903-ac507f85ad985740.js:1
uI @ framework-6c8598519c693321.js:9
oU @ framework-6c8598519c693321.js:9
o @ framework-6c8598519c693321.js:9
x @ framework-6c8598519c693321.js:33
T @ framework-6c8598519c693321.js:33
postMessage
u @ framework-6c8598519c693321.js:33
T @ framework-6c8598519c693321.js:33
postMessage
u @ framework-6c8598519c693321.js:33
M @ framework-6c8598519c693321.js:33
n.unstable_scheduleCallback @ framework-6c8598519c693321.js:33
ow @ framework-6c8598519c693321.js:9
ok @ framework-6c8598519c693321.js:9
aH @ framework-6c8598519c693321.js:9
ag @ [id]-d499dac32c8819cb.js:1
await in ag
eU @ framework-6c8598519c693321.js:9
eH @ framework-6c8598519c693321.js:9
(anonymous) @ framework-6c8598519c693321.js:9
re @ framework-6c8598519c693321.js:9
rn @ framework-6c8598519c693321.js:9
(anonymous) @ framework-6c8598519c693321.js:9
oP @ framework-6c8598519c693321.js:9
eF @ framework-6c8598519c693321.js:9
ro @ framework-6c8598519c693321.js:9
nU @ framework-6c8598519c693321.js:9
nD @ framework-6c8598519c693321.js:9
3dbccb2b-05ef1ee3bac9f8c1.js:1 Uncaught (in promise) AbortError: The play() request was interrupted by a new load request. DOMException - The play() request was interrupted  |  Blog  |  Chrome for Developers
o @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
Promise.then
c @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
(anonymous) @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
n2 @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
startAudio @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
r.emit @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
(anonymous) @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
(anonymous) @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
s @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
Promise.then
c @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
(anonymous) @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
n2 @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
createTracks @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
(anonymous) @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
(anonymous) @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
n2 @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
setTrackEnabled @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
setMicrophoneEnabled @ 3dbccb2b-05ef1ee3bac9f8c1.js:1
(anonymous) @ 7903-ac507f85ad985740.js:1
Promise.then
(anonymous) @ 7903-ac507f85ad985740.js:1
n.startCall @ 7903-ac507f85ad985740.js:1
a @ 7903-ac507f85ad985740.js:1
await in a
(anonymous) @ 7903-ac507f85ad985740.js:1
setTimeout
(anonymous) @ 7903-ac507f85ad985740.js:1
uI @ framework-6c8598519c693321.js:9
oU @ framework-6c8598519c693321.js:9
o @ framework-6c8598519c693321.js:9
x @ framework-6c8598519c693321.js:33
T @ framework-6c8598519c693321.js:33
postMessage
u @ framework-6c8598519c693321.js:33
T @ framework-6c8598519c693321.js:33
postMessage
u @ framework-6c8598519c693321.js:33
M @ framework-6c8598519c693321.js:33
n.unstable_scheduleCallback @ framework-6c8598519c693321.js:33
ow @ framework-6c8598519c693321.js:9
ok @ framework-6c8598519c693321.js:9
aH @ framework-6c8598519c693321.js:9
ag @ [id]-d499dac32c8819cb.js:1
await in ag
eU @ framework-6c8598519c693321.js:9
eH @ framework-6c8598519c693321.js:9
(anonymous) @ framework-6c8598519c693321.js:9
re @ framework-6c8598519c693321.js:9
rn @ framework-6c8598519c693321.js:9
(anonymous) @ framework-6c8598519c693321.js:9
oP @ framework-6c8598519c693321.js:9
eF @ framework-6c8598519c693321.js:9
ro @ framework-6c8598519c693321.js:9
nU @ framework-6c8598519c693321.js:9
nD @ framework-6c8598519c693321.js:9

I am working in a new custom application where we are integrating the web calling functionality through Retell SDK. When the server boots up in the prod mode, and when we try to do initiate the call, the call just hangs and then when it starts the agent’s voice doesn’t come up it is just the background voice that comes up.

I have also put in the browser console logs’ that our team is getting, can you please help me solve this issue as we use this web call functionality to provide this system for a test to our users. And we cannot give them a bad experience.

2

The stack trace is the useful part here, and it points at playback rather than the agent.

Your agent_start_talking and agent_stop_talking events fire normally, so audio is arriving fine. What fails is playing it: AbortError: The play() request was interrupted by a new load request. That is the browser killing a pending play() because the audio element got a new source before the first one ever started. Which is exactly your symptom of no agent voice, just background noise.

Two likely causes, and I think you have both.

  1. startCall is not running from a user gesture. In your trace it fires from a setTimeout inside a React effect (unstable_scheduleCallback, then startCall). Chrome’s autoplay policy blocks audio started that way, and that also explains the AudioContext error higher up in your log. Move startCall into the actual click handler on your start call button and await it there.
  2. Something is mounting twice. You have a disconnect from room immediately before the playback failure, which usually means the component ran startCall, tore down, then ran again. React 18 effects firing twice or a modal remounting will both do it. Add a ref guard so startCall can only run once per session, and a cleanup that calls stopCall on unmount.

Also keep the audio element stable. If it sits inside a subtree that re-renders, React swaps the node, the new element loads, and the pending play() on the old one aborts. Same error, different trigger.

Quick way to confirm it is the gesture issue: drop a plain button into your app that does nothing except call startCall on click. If the agent is audible that way but not on your current auto start path, it is number 1 and the fix is a five minute change.

On why it only shows in prod: dev timing is usually slower and accidentally hides the race, and mount order can shift once everything is bundled.

3

Hello @megh.shah browsers block audio playback until the user directly interacts with the page. If your call is started programmatically (e.g. on page load, in a useEffect, or via a setTimeout as your logs show), audio playback gets blocked/interrupted, matching the AbortError: play() request was interrupted you’re seeing.

Fix: only call startCall/startAudioPlayback() from inside a real user click handler, not on load or via async chains not directly tied to a click.

Also worth checking:

  • The access token from create-web-call expires 30s after creation — create it right when the user clicks “start,” not earlier, or the call may hang before starting.

  • Confirm mic permissions and HTTPS — required for microphone access in production.

This confirms it directly. Looking at your console logs, startCall is being called inside a setTimeout chain (setTimeout → (anonymous) → n.startCall), not directly from a click event — that’s why the browser aborts the audio play() request with the load-interrupted error, and why you only hear background/no agent audio.

Fix:

  1. Call retellWebClient.startCall({ accessToken }) synchronously inside the click event handler itself — don’t wrap it in setTimeout, and avoid unnecessary **await**s before it if possible.

  2. Fetch/create the access token right when the user clicks, since it expires 30 seconds after creation — creating it earlier (e.g. on page load) can cause the hang you’re seeing.

  3. Ensure the page is served over HTTPS in prod (mic access requires a secure context).

See the exact guidance in Make a web call

Thank You