Babylon.js | Burtons Media Group

This is the 3rd tutorial in our Bablylon.JS series. In the first two, we created a scene, added the WebVR capability, added a skybox, and finally the ground. But what is an environment without music and sound effects?To begin, here is our javascript from the first two tutorials: Tutorial 3 - Audio in Babylon js html, body {overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } var canvas = document.getElementById("renderCanvas"); var createScene = function() { // Create scene var scene = new BABYLON.Scene(engine); // Default Environment var environment = scene.createDefaultEnvironment({ createSkybox: false, createGround: true, groundSize: 1000, groundColor: BABYLON.Color3.Green(), enableGroundShadow: true, groundYBias: 1 }); var skyMaterial = new BABYLON.StandardMaterial("skybox", scene); skyMaterial.backFaceCulling = false; skyMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); skyMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyMaterial.specularColor = new BABYLON.Color3(0, 0, 0); var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:1000.0}, scene); skybox.material = skyMaterial; // Enable VR var vrHelper = scene.createDefaultVRExperience({createDeviceOrientationCamera:false}); vrHelper.enableTeleportation({floorMeshes: [environment.ground]}); var building = BABYLON.SceneLoader.Append("./", "vrchapel.glb", scene, function (meshes) { scene.createDefaultCameraOrLight(true, true, true); }); return scene; }; var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); var scene = createScene(); engine.runRenderLoop(function () { if (scene) { scene.render(); } }); // Resize window.addEventListener("resize", function () { engine.resize(); }); According to the documentation, the expected file type is mp3, but I found that wav file types also work without a problem.Make sure that the audio file is located in the same or a sub-folder of the html file that will be loading it to play. Now to load the audio file. I placed the instructions before the WebVR is loaded, immediately after the SkyBox is loaded: // A little mood music var music = new BABYLON.Sound("music", "mnkchant.mp3", scene, soundReady, {loop: true }); function soundReady() { music.play(); } Let's break the instruction down. We begin by creating a variable to associate with the sound file. It is loaded into memory using the new BABYLON.Sound command. The parameters for the command are: The name of the sound (I used the same name as the variable for convenience)The URL/location of the sound fileThe scene to load the sound into (i.e. scene)Function to call when the sound is loaded and ready to playOptions such as looping, volume, isPaused, etc Once the sound is loaded and ready to play, the function soundReady is called which will play the music. I found that this is great to get the music playing by default. When it is loaded in your server (local or a webserver), you will see an icon displayed in the top left corner: This is because modern browser automatically silence any audio that begins playing in the browser (and let's be honest, this is a good thing). Clicking on the audio will allow you to hear the audio that you loaded. In a later tutorial we will add the controls for the audio portion of the environment. https://www.youtube.com/watch?v=kX9-ZZ79kLg