Unmute Icon remove

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!

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

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

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

ok, byeeeee. :slight_smile:

@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

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

1 Like

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.

4 Likes

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

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

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.

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

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.

1 Like