BabylonJS - 播放声音和音乐

没有声音和音乐，游戏是不完整的。BabylonJS 声音引擎附带一个 API，可帮助向游戏添加声音效果。当游戏中出现打斗时，你需要发出枪声，在这里使用babylonjs声音引擎也可以实现同样的效果。您可以根据键盘/鼠标控制游戏的效果来获得声音效果。声音引擎提供环境声音、专业声音和定向声音。该引擎支持 .mp3 和 .wav 声音格式。

句法

var music = new BABYLON.Sound(
   "Music", "sound.wav", scene, null, { 
      loop: true, 
      autoplay: true 
   }
);

参数

考虑以下与声音引擎相关的参数 -

  • 名称- 声音的名称。

  • URL - 要播放的声音的 url。

  • Scene - 必须播放声音的场景。

  • Callbackfunction - 当声音准备好播放时调用的回调函数。目前，它为空。我们将通过一些示例并学习如何使用它。

  • Json 对象- 该对象具有需要完成的操作的基本细节。

  • sound.autoplay - 这样，一旦下载文件，声音就会自动播放。

  • Loop:true - 这意味着声音将连续循环播放。

在项目目录中创建声音文件夹并下载任何示例音频文件以测试输出。

现在让我们向已经创建的场景添加声音。

演示

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Scene- Playing sounds and music</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>
   
   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0, 1, 0);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);
            
            var music = new BABYLON.Sound("sound", "sounds/scooby.wav", scene, null, { 
               loop: true, 
               autoplay: true 
            });	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

输出

上面的代码行生成以下输出 -

无声基本场景

现在让我们检查一下回调函数是如何工作的。如果您不希望声音自动播放或者只想在需要时播放声音，可以使用回调函数来实现。

例如，

Var music = new BABYLON.Sound ("Music", "music.wav", scene, function callback() {music.play();});

演示

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Scene- Playing sounds and music</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0, 1, 0);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true)
            
            var music = new BABYLON.Sound(
               "sound", "sounds/scooby.wav", scene, function callback() { setTimeout(function() {music.play();}, 5000)});	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

在回调中，我们将使用setTimeout。这意味着，我们希望声音仅在特定时间后播放。我们添加了 5 秒作为计时器，因此当文件 Scooby.wav 下载完毕并完成 5 秒时就会播放声音。

通过键盘上的点击和按键来播放声音

单击场景中的任意位置，您将听到爆炸音效，如果您按左、右、上、下任意箭头键，则会播放爆炸音效。

对于点击，我们将onmousedown事件附加到窗口，对于按键，我们将使用 keydown 事件。根据键码，播放声音。

演示

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Scene- Playing sounds and music</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0, 1, 0);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true)
            
            var sound = new BABYLON.Sound("gunshot", "sounds/explosion.wav", scene);

            window.addEventListener("mousedown", function (evt) {	
               if (evt.button === 0) { // onclick
                  sound.play();
               }
            });

            window.addEventListener("keydown", function (evt) { // arrow key left right up down
               if (evt.keyCode === 37 || evt.keyCode === 38 || evt.keyCode === 39 || evt.keyCode === 40) {
                  sound.play();
               }
            });		
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

输出

上面的代码行将生成以下输出 -

无声基本场景

你可以在json对象中控制声音的音量，这就是我们一开始遇到的。

例如，

Var music = new BABYLON.Sound("sound", "sounds/scooby.wav", scene, null, { 
   loop: true, 
   autoplay: true, 
   volume:0.5 
});

要知道声音文件何时完成，可以使用一个事件，如下所示 -

music.onended = function () {	
   console.log("sound ended");
   
   //you can do the required stuff here like play it again or play some other sound etc.
};

如果您除了构造函数之外还想控制声音，也可以使用 SetVolume 属性。

例如，

music.setVolume(volume);

如果您在场景中播放多种声音，则可以为创建的所有声音设置全局声音。

例如，

BABYLON.Engine.audioEngine.setGlobalVolume(0.5);

创建空间 3D 声音

如果要将声音转换为空间声音（类似于空间声音的声音），则需要向声音构造函数添加选项。

例如，

var music = new BABYLON.Sound("music", "sounds/explosion.wav", scene, null, { 
   loop: false, 
   autoplay: true, 
   spatialSound: true 
});

以下是空间声音的不同选项 -

  • DistanceModel - 默认情况下使用“线性”方程。其他选项是“倒数”或“指数”。

  • MaxDistance - 设置为 100。这意味着一旦听者距离声音超过 100 个单位，音量将为 0。您将无法再听到声音

  • PanningModel - 设置为“HRTF”。该规范称，这是一种更高质量的空间化算法，使用与测量的人类受试者的脉冲响应进行卷积。它指的是立体声输出。

  • MaxDistance - 仅当 distanceModel 为线性时使用。它不与倒数或指数一起使用。

空间音效演示

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Scene- Playing sounds and music</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0, 1, 0);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);	
            
            var music = new BABYLON.Sound(
               "music", "sounds/explosion.wav", scene, null, {
                  loop: false, autoplay: true, spatialSound: true, distanceModel: "exponential"
               }
            );
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

将声音附加到网格

使用 BABYLON.Sound，您可以将声音附加到网格上。如果网格正在移动，声音也会随之移动。AttachtoMesh（网格）是要使用的方法。

演示

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Scene- Playing sounds and music</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0, 1, 0);

            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var materialforbox = new BABYLON.StandardMaterial("texture1", scene);
            var box = BABYLON.Mesh.CreateBox("box", '2', scene);	
            box.material  = materialforbox;
            materialforbox.ambientColor = new BABYLON.Color3(1, 0, 0.2);

            var music = new BABYLON.Sound("music", "sounds/explosion.wav", scene, null, { 
               loop: false, 
               autoplay: true, 
               spatialSound: true, 
               distanceModel: "exponential"
            });	
            music.attachToMesh(box);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

输出

上面的代码行生成以下输出 -

空间 3D 音效