Music Start on Model Load

Questions
1

Afternoon all,

Thanks for everyone’s help so far. Thus far in my Babylon.js journey I have managed to load my own textured model (exported from blender) and have a camera auto-rotate around it when the model loads up. I also have managed to get atmospheric music to play in the background. However, the music will only start when an un-mute button is clicked in the top corner of the screen. Ideally I want this music to start as soon as the model is loaded and starts auto-rotating.

On various searches it suggests that sounds won’t play under html5 until there is some user interaction. Is this the case? I have found some reference to controlling this behaviour and hiding the mute button using the following:

BABYLON.Engine.audioEngine.useCustomUnlockedButton = true;
BABYLON.Engine.audioEngine.unlock();

But whilst this hides the un-mute button the music doesn’t play. Again it appears as though the second command can only be called via a user interaction.

If it is not possible to start the music with no user interaction then the second best option would be for the model to not load automatically and both the BABYLON.SceneLoader and BABYLON.Sound commands to be called at the same time from a single user click. is this possible?

Current Code below for reference:

// Add your code here matching the playground format

    const createScene = function () {

        //Create Scene    

        var scene = new BABYLON.Scene(engine);  

        //Load Model

        BABYLON.SceneLoader.ImportMeshAsync("", "", "Formula_project_assetto_FINAL_TRIAL.babylon");

        //Camera Controls

        var camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 10, new BABYLON.Vector3(), scene);

        camera.setPosition(new BABYLON.Vector3(3.5, 1.5, 3.5));

        camera.attachControl(canvas, true);

        camera.useAutoRotationBehavior = true;

        camera.autoRotationBehavior.idleRotationSpeed = 0.25;

        //Light Control

        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

        //Sound Control

        const sound = new BABYLON.Sound("f1-theme", "http://localhost:5000/Formula 1 Theme Live in Concert by Brian Tyler.mp3", scene, null, { loop: true, autoplay: true });

        

        //BABYLON.Engine.audioEngine.useCustomUnlockedButton = true;

        //BABYLON.Engine.audioEngine.unlock()

        return scene;

    };
2

Essentially, yes. Chrome has some policies that may make autoplay work, but you can’t really control them: Chính sách tự động phát trong Chrome  |  Blog  |  Chrome for Developers

So:

is the best thing to do.

Simply put your loading code in the function handling the button click and in the onsuccess callback of the scene loading, start the sound.

3

Hello - many thanks for this. I thought that might be the case and I’ve implemented this as suggested. Thanks again!