# Unmute Icon remove

**URL:** <https://forum.babylonjs.com/t/unmute-icon-remove/257>\
**Category:** Questions\
**Created:** [December 15, 2018, 4:15pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257 "2018-12-15T16:15:36Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [December 15, 2018, 4:15pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/1 "2018-12-15T16:15:37Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/1X/83f0d180fad922072b51ae8d66671b4030ea2476.jpeg)

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

Thank you!

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [December 15, 2018, 4:33pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/2 "2018-12-15T16:33:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [December 15, 2018, 4:58pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/3 "2018-12-15T16:58:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Wingnut](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wingnut/32/53_2.png) [@Wingnut](https://forum.babylonjs.com/u/Wingnut)\
**Post date:** [December 16, 2018, 1:05am UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/4 "2018-12-16T01:05:08Z")

</div>

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

ok, byeeeee. 🙂

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [December 16, 2018, 12:40pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/5 "2018-12-16T12:40:08Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [December 17, 2018, 2:19pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/6 "2018-12-17T14:19:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [December 17, 2018, 2:48pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/7 "2018-12-17T14:48:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [December 17, 2018, 7:24pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/8 "2018-12-17T19:24:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mathieu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathieu/32/1418_2.png) [@Mathieu](https://forum.babylonjs.com/u/Mathieu)\
**Post date:** [August 29, 2019, 9:37am UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/9 "2019-08-29T09:37:51Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [August 29, 2019, 12:47pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/10 "2019-08-29T12:47:30Z")

</div>

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 🙂  
else it will not be able to start.

---

<div class="post-metadata">

**Author:** ![Mathieu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathieu/32/1418_2.png) [@Mathieu](https://forum.babylonjs.com/u/Mathieu)\
**Post date:** [August 29, 2019, 1:02pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/11 "2019-08-29T13:02:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [August 29, 2019, 1:06pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/12 "2019-08-29T13:06:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jayakannan](https://avatars.discourse-cdn.com/v4/letter/j/ee59a6/32.png) [@jayakannan](https://forum.babylonjs.com/u/jayakannan)\
**Post date:** [August 18, 2021, 9:59am UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/13 "2021-08-18T09:59:49Z")

</div>

Any possible ways to do force unmute sounds?

---

<div class="post-metadata">

**Author:** ![Dok11](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dok11/32/25754_2.png) [@Dok11](https://forum.babylonjs.com/u/Dok11)\
**Post date:** [May 12, 2023, 5:41pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/14 "2023-05-12T17:41:52Z")

</div>

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](https://developer.chrome.com/blog/autoplay/)

---

<div class="post-metadata">

**Author:** ![DRLeria](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/drleria/32/50928_2.png) [@DRLeria](https://forum.babylonjs.com/u/DRLeria)\
**Post date:** [May 12, 2023, 6:20pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/15 "2023-05-12T18:20:50Z")

</div>

I’m using [https://howlerjs.com/](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

---

<div class="post-metadata">

**Author:** ![Dok11](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dok11/32/25754_2.png) [@Dok11](https://forum.babylonjs.com/u/Dok11)\
**Post date:** [May 12, 2023, 8:13pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/16 "2023-05-12T20:13:34Z")

</div>

> [@DRLeria](#):
>
> 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…

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` [Babylon.js docs](https://doc.babylonjs.com/typedoc/classes/BABYLON.Sound#setVolume)  
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

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [May 12, 2023, 8:53pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/17 "2023-05-12T20:53:35Z")

</div>

> [@Dok11](#):
>
> BabylonJS does not support AAC audio format

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

> [@Dok11](#):
>
> BabylonJS really does not have `pitch`

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 🙂

---

<div class="post-metadata">

**Author:** ![Dok11](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dok11/32/25754_2.png) [@Dok11](https://forum.babylonjs.com/u/Dok11)\
**Post date:** [May 12, 2023, 9:27pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/18 "2023-05-12T21:27:33Z")

</div>

> [@sebavan](#):
>
> It should as it simply uses WebAudio and supports any format your browser would.

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.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [May 12, 2023, 10:28pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/19 "2023-05-12T22:28:09Z")

</div>

Can you share a playground ?

---

<div class="post-metadata">

**Author:** ![DRLeria](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/drleria/32/50928_2.png) [@DRLeria](https://forum.babylonjs.com/u/DRLeria)\
**Post date:** [May 14, 2023, 2:23pm UTC](https://forum.babylonjs.com/t/unmute-icon-remove/257/20 "2023-05-14T14:23:06Z")

</div>

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.

[Next page](https://forum.babylonjs.com/t/unmute-icon-remove/257.md?page=2)
