Sound - Multiple Sounds with same source

Questions
1

Hello All,

I have only one audio (an MP4) and i want to enable spatial sound but with multiple positions in my 3D model. I am able to do with one position. But if i am adding another Sound, it is giving me an Error. For eg, in below code there are 2 sounds with same audio (vt.video - this is an HTMLVideoElement).

How can i add same audio from multiple sources ?

const videoSound = new Sound(‘videoSound’, vt.video, scene, undefined, {
loop: false,
autoplay: true,
spatialSound: true,
streaming: true,
distanceModel: ‘exponential’,
rolloffFactor: 1,
});

  const videoSound1 = new Sound('videoSound1', vt.video, scene, undefined, {
    loop: false,
    autoplay: true,
    spatialSound: true,
    streaming: true,
    distanceModel: 'exponential',
    rolloffFactor: 1,
  });
  videoSound1.setPosition(new Vector3(40, 0, 40));
2

Hello,

Can you share a reproduction in the Playground?

3

I am using lot of libraries and internal video to play this. so to come up with PG would be difficult.

just adding one more thing. This issue is happening only on Chrome. On Firefox i could see 2 Sound objects in Inspector.

4

You could share a github or zip project then :slight_smile:

5

cc @docEdub

6

What error are you getting?

7

i have updated an existing playground to reproduce this error. I have just added music1 (same as music object) and it is giving me an error on chrome browser console. Added screenshot too…

Screenshot 2023-01-06 at 7.44.54 PM
Screenshot 2023-01-06 at 7.44.54 PM1920×1200 214 KB

9

Just FYI - this is happening only on Chrome and Safari…

10

I am looking into this right now and getting the same results as you, but in Firefox I do not hear two instances of the audio. There is no error in Firefox like there is in Chrome and Safari, but only because Firefox is silently failing. Open https://playground.babylonjs.com/#EDVU95#60 in Firefox to see this happening.

I do not think browsers support using the same HTMLVideoElement or HTMLAudioElement twice like how you are doing it. It is essentially asking the browser to play the same media element twice, which does not make sense to the browser, so it fails.

The only solution I can think of that might work without downloading the video twice is to stream the video into a buffer and create the Sound object from the buffer instead of a <video> element.

If that is too much work, then you will have to use a more standard solution that causes the video to be downloaded twice. There is nothing I can think of, yet that we can do in Babylon.js to work around this browser limitation.

1 Like
11

I am able to see 2 Sound instances on Inspector for Firefox. here is the screenshot

Screenshot 2023-01-09 at 7.11.18 PM
Screenshot 2023-01-09 at 7.11.18 PM1920×1200 174 KB

12

Yes, you can see both instances in Firefox but only the second instance plays. Did you try the playground I linked? It shows that the first instance does not play in Firefox even though it is showing in the inspector. See https://playground.babylonjs.com/#EDVU95#60. Only the second instance plays.

13

Can you please let me know how should i do it… Right now i am creating a videoTexture by passing the URL of the video to it.

14

You may want to use the WebAudio API directly instead of the Babylon audio API for this case. With the WebAudio API you can use a splitter to route the same audio source into separate panner nodes that you can then spatialize independently.

We may support this in future Babylon releases, but right now it’s not possible using only the Babylon audio API.

2 Likes