Hi again, how are you?
I have a problem more related to the browser than Babylon… I think. If I put a sound in Babylon to play this button appears:
Before, when the sound was made in HTML, there was no such problem. I just changed it for it to work directly through Babylon and I already have an audio on/off controller.
Google Chrome, Windows 10.
edit: If there is no way to fix this, can you tell me some condition with which I can control it? Well, it’s rendering two audios.
Hi!
if (Engine.audioEngine) {
Engine.audioEngine.useCustomUnlockedButton = true
}
Thank you! But I put this in sceneComponent.tsx where the Engine is and now the sound doesn’t work anymore. But the button is gone.
edit: Here the code I used to get the music from Babylon and called inside navbar:
sceneRef receive scene and get by name of sound.
There can be multiple reasons for not playing your audio. Did you turn on your speakers? 
Ok, just joking!
So, did you try to debug the part of your code where you start the music? Is the condition met and does it run the getMusic.play() function? Is the getMusic variable correctly set? Is the audio ready to be played?
Handling the ‘ready to play’ callback function:
EDIT:
// this will not work
var music = new BABYLON.Sound("Violons", "sounds/violons11.wav", scene, null, { loop: true, autoplay: false });
music.play()
// this will
var music = new BABYLON.Sound("Violons", "sounds/violons11.wav", scene, () => {
music.play()
}, { loop: true, autoplay: false });
You can try it out here:
Here my code to make sound works:
This is called inside Babylon 3D ambient.
It starts normally, and I can start and stop the music from the controller. However, when I put it that piece of code doesn’t work anymore, nor does the autoplay. I don’t know what it could be.
Obviously. I bet you don’t unlock the audio manually.
Add this:
Engine.audioEngine?.unlock()
This must be called for example from a click event on the page. User interaction is needed here.
EDIT: Sorry, I could tell you about this earlier 
Or you can use something like that - https://playground.babylonjs.com/#PCY1J#216
Here the music is playing after the any first pointer event since in order to play user has to interact with the page first.
When I put this “Engine.audioEngine?.unlock()” the project crash…
Thank you. I did some mechanics like point n click using this method. If nothing works I’ll try this…
Try this. Create an index.html file on your disk and simply open it in a browser. It just works 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Babylon Template</title>
<style>
html,
body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>
<body>
<button onclick="unlockAudio()" id="unlockButton" disabled style="padding: 20px; margin: 20px">Loading music...</button>
<canvas id="renderCanvas" touch-action="none"></canvas>
<!-- touch-action="none" for best results from PEP -->
<script>
let music
function unlockAudio() {
BABYLON.Engine.audioEngine.unlock()
music.play()
}
const canvas = document.getElementById('renderCanvas') // Get the canvas element
const engine = new BABYLON.Engine(canvas, true) // Generate the BABYLON 3D engine
if (BABYLON.Engine.audioEngine) {
BABYLON.Engine.audioEngine.useCustomUnlockedButton = true
} else {
alert('No audio engine detected')
}
// Add your code here matching the playground format
const createScene = function() {
const scene = new BABYLON.Scene(engine)
BABYLON.MeshBuilder.CreateBox('box', {})
const camera = new BABYLON.ArcRotateCamera('camera', -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0))
camera.attachControl(canvas, true)
const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(1, 1, 0))
return scene
}
const scene = createScene() //Call the createScene function
music = new BABYLON.Sound(
'music',
'https:/playgrounds.babylonjs.xyz/boss_time.mp3',
scene,
() => {
const btn = document.getElementById('unlockButton')
btn.disabled = false
btn.innerHTML = 'Unlock audio and start music'
},
{ loop: true, autoplay: false }
)
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function() {
scene.render()
})
// Watch for browser/canvas resize events
window.addEventListener('resize', function() {
engine.resize()
})
</script>
</body>
</html>
EDIT:
Or here is a version online:
https://playgrounds.babylonjs.xyz/audio.html
There is a slight delay in the audio itself at the beginning.
Still didn’t work… see this monday. Thanks for the replies!
Are you willing to share you code in private? If this simple example doesn’t help you I am sorry, but I can’t help you more without seeing your code.
You need to create a ref and use scene.current if you’re using it in react
Update: I managed, with a teammate, to get the above methods that @roland passed on to work. I had to use the “Engine.audioEngine.useCustomUnlockedButton = true” in the component where the 3D was running and the “unlock” method in the component where there was the start and stop button for the music. Now the only problem is that the music doesn’t start when you click on the scene. Thanks to everyone who has responded so far!
I forgot to tell… im using React
You’re welcome!
That doesn’t work:
F.e., once you load that demo, click on the demo, then in MS Edge (based on Chrome) hit refresh. Then, without moving the mouse, click the demo. It will be muted, and the icon will appear.
@trusktr
If you refresh the webpage, it is a new “session”, and a user input is required again for sounds to play.
Nobody wants to visit a website and be blasted with music and sounds without consent
On the contrary, all good experiences that I have ever tried in any browser always start with sound enabled as soon as possible. Never the opposite!
Babylon currently prevents this, because even after user interaction, sounds stay muted! That’s a bad experience considering that the user is already interacting with the experience.
Here’s the solution:
