VAPI•4mo ago

WebSDK uses buildAudioPlayer by default to create Audio track through HTML element

I want to override the logic in the SDK when the call receives a 'track-started' event to be able to output the assistant's audio through my own source within a 3D scene using Three.js. I have been able to capture this audio source within my own component but I cannot remove the default behaviour of the SDK which creates an Audio HTML Element when an audio media stream track is received during the connection. I want to negate or remove this and need some way of overriding the initial event if possible - or perhaps a way of destroying the created Audio HTML Element whenever it is created if no other solution is present.

This is the part of the SDK which performs the behaviour I described:

this.call.on('track-started', async (e) => {
if (!e or !e.participant) {
return;
}
if (e.participant?.local) {
return;
}
if (e.participant?.user_name !== 'Vapi Speaker') {
return;
}
if (e.track.kind === 'video') {
this.emit('video', e.track);
}
if (e.track.kind === 'audio') {
await buildAudioPlayer(e.track, e.participant.session_id);
}
this.call?.sendAppMessage('playable');
});

This is how I am able to add my own functionality on top of that:

const call = this.vapi?.getDailyCallObject();

call?.on('track-started', (e: any) => {
if (!e or !e.participant) return;
if (e.participant.local) return;
if (e.participant.user_name !== 'Vapi Speaker') return;

if (e.track.kind === 'audio') {
this.setSpatialAudio(e.track);
}
});

KyleAPP•9/12/25, 7:13 AM

Hi tiro,

To override the default behavior of the SDK when handling audio tracks, you cannot directly negate the creation of the Audio HTML element due to how the SDK is structured. However, you can manage the track-startedtrack-started event manually by adding your logic after the event is triggered. Here’s a general approach:

Capture the Track: When you receive a track-startedtrack-started event, intercept the event and obtain the media stream track.
Custom Playback: Use your own Three.js audio integration by applying the captured audio track to your Three.js audio context or audio nodes.
Prevent Default Audio Element: After setting up your custom playback, you might want to explore modifying or removing the default audio element if it appears. However, the best practice is to configure your application to ignore or hide this element if you cannot avoid its creation without modifying the SDK source.

If SDK modifications are an option, consider contributing to its codebase or using a fork of the library where you can modify the code according to your needs.

For more information on managing audio within the Web SDK, you can refer to the relevant Web SDK documentation.

WebSDK uses buildAudioPlayer by default to create Audio track through HTML element

Similar Threads

Similar Threads

Similar Threads