Unmute Icon remove

Questions
1

Hello,

I see an icon when a sound is created with babylon which is really very embarrassing. This covers my menu and I have to click on it at each scene load for the sound to play.

babylonUnmuteIcon

How to make it not show this icon loading the scene? Or can you click with code to close it?

Thank you!

1 Like
2

You can provide css to move it but this icon is mandatory as for now browsers for us to have a user action before enabling sounds

3

I saw that Chrome had made some changes for that, and I noticed that if you click on the canvas before the scene is loaded, this icon does not show up.

So I’m looking for ideas for the user to click on the canvas before loading the scenes so that it does not show up. I’m looking for a useful idea and not just a button to say ‘load the scene’.

But if not, I’ll move it with css. Thank you

1 Like
4

Hi guys. If CSS is allowed, maybe display: none; or opacity: 0; or z-index: -1000; ?

ok, byeeeee. :slight_smile:

5

@wingnut The problem is that if this button is not click, the sound will not activate. So hide it, yes, but then, how to activate the sound?

In fact I noticed that this happens quad I did F5 to refresh the browser.If I me login index page and then am redirected to the game page, the button does not show and the sound activate. if I update the page of the game later (F5) the button appears and must be click to have the sound play.

1 Like
6

Yep. But as this is a browser restrictions there is not so much we can do

1 Like
7

If you want to go full custom: audioEngine.useCustomUnlockedButton = true; so nothing would show up but you ll need to call audioEngine.unlock(); yourself on the dom action you want.

6 Likes
8

Excellent, this is I was looking for, thank you very much Sebavan

9

Hi,
I have the same problem that you had.

I put “BABYLON.Engine.audioEngine.useCustomUnlockedButton = true;” after creating my photo Dom, and “BABYLON.Engine.audioEngine.unlock();” after creating my music. But I have a problem: The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

I don’t understand, It worked one time then it didn’t have worked anymore
 I mean the sound is not working
 The icon is still not displayed.
Do you know why ?

BTW, when I “console.log(BABYLON.Engine.AudioEngine.unlocked)” , it displays true, so the sounds should start


Regards, Mathieu

10

It would be great to see a repro for this.

If you are using a custom unlock button, it means you are managing the entire UI on your own. Therefore you need to call unlock() only a user interaction like a click :slight_smile:
else it will not be able to start.

11

Ok, So I have a class “photo” which created the photoDom of my scene.

class Photo{
constructor(name,url,id)
{
    this.dome = new BABYLON.PhotoDome(
        name,
        url,
    {
        resolution: 32,
        size: 1000,
        faceForward: false
    },
    scene
    );
     BABYLON.Engine.audioEngine.useCustomUnlockedButton = true;
    // On test si dans le fichier JSON, on a attribué une valeur au fov de la caméra pour cette scÚne. 
    // Si rien n'est mis dans le JSON alors on ne rentre pas dans la condition
    // valeur par défaut : 0.8. Les valeurs sont en radians.
   if(data.Story.scenes[id].fov)
   {
       camera.fov =  data.Story.scenes[id].fov
   }
   if(data.Story.scenes[id].playlist.url)
   {
    
     this.music  = new BABYLON.Sound("music", data.Story.scenes[id].playlist.url , scene, null, { loop: false , autoplay: true, volume: 0.5 });
    
   
        
        BABYLON.Engine.audioEngine.unlock();
     
     
     
   }
    
// Création des Hotspots 
 new  Hotspots(id,this); 

    return this;

}}

I don’t have problem with firefox only with chrome. So I used these functions for chrome

1 Like
12

it is because the unlock function is called outside a click.

You should have somewhere button.onclick = () => { BABYLON.Engine.audioEngine.unlock(); } to ensure a compliant behavior.

2 Likes
13

Any possible ways to do force unmute sounds?

2 Likes
14

It’s restrictions by browsers, they usually are not give persmission to autoplay audio and video. User should interact with a page (make a click), after this page scripts can run audio play.
This starts from 2017, here is a proof Autoplay policy in Chrome - Chrome Developers

1 Like
15

I’m using https://howlerjs.com/

I know that BJS has a great Audio Engine but I fell more comfortable with Howler, also with a simple line of code you can do a fade in / out, change the pitch


It is still mandatory to press on the screen to activate the audio on mobile devices, but it is fixed with a home screen or a simple button

1 Like
16

I think Howler does not give ability to use spatial sound of 3d scene.
And BabylonJS also has options to change volume with fade in / out. It’s a second argument of setVolume Sound | Babylon.js Documentation
In fact, there are no easing, just linear change. Maybe it possible via gain property of the Sound instance, but I don’t looked so deep.

But BabylonJS really does not have pitch. And it was a revelation for me - BabylonJS does not support AAC audio format. How?? It’s 2023 already! xD

1 Like
17

It should as it simply uses WebAudio and supports any format your browser would.

There is no built-in support but you can add any node in the webaudio stack so it should be extensible enough to couple it with pitch ?

On the bright side, this is definitely an area we want to improve :slight_smile:

18

I tried it on the one aac-file that works fine in the ThreeJS, and don’t plays in the BabylonJS (v5.54.0), and there is a warning in the console.

19

Can you share a playground ?

20

Hi @Dok11!
Of course.

I think that HowlerJS uses Spatial audio but you canÂŽt attach the sounds to a mesh for example.

I use Howler only when I don’t see a need to work with spatial audio.