BabylonJS - 播放声音和音乐

上一页
下一页

没有声音和音乐，游戏是不完整的。BabylonJS 音频引擎带有一个 API，可以帮助为游戏添加音效。当游戏中出现战斗场景时，你需要听到枪声，使用 BabylonJS 音频引擎也可以实现这一点。你可以根据键盘/鼠标控制效果获得游戏的音效。音频引擎提供环境音效、专用音效和方向性音效。该引擎支持 .mp3 和 .wav 音频格式。

语法

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

参数

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

  • 名称 - 声音的名称。

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

  • 场景 - 要播放声音的场景。

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

  • 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>

输出

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

Basic Scene Without Sound

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

例如，

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>

输出

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

Basic Scene Without Sound

你可以在一开始遇到的 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 - 默认情况下，它使用“线性”方程。其他选项为“inverse”或“exponential”。

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

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

  • MaxDistance - 仅当 distanceModel 为线性时使用。它不与 inverse 或 exponential 一起使用。

带有空间声音的演示

<!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 (mesh) 是要使用的方法。

演示

<!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>

输出

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

Spatial 3D Sound
打印页面
上一页
下一页
广告