BabylonJS-播放声音和音乐 
  

BabylonJS-播放声音和音乐


没有声音和音乐,游戏是不完整的。 BabylonJS声音引擎带有一个API,可帮助向游戏添加声音效果。在游戏中看到打架时,您需要开枪射击,在这里可以使用babylonjs声音引擎来实现。您可以基于游戏的键盘/鼠标控件效果来获得声音效果。声音引擎提供环境声音,专业声音和定向声音。该引擎支持.mp3和.wav声音格式。

句法

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

参量

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

  • 名称-声音的名称。

  • URL-要播放的声音的URL

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

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

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

  • sound.autoplay-这样,下载文件后,声音会自动播放。

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

在项目目录中创建声音文件夹,然后下载任何样本音频文件以测试输出。

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

演示版

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

输出

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

没有声音的基本场景

现在让我们检查回调函数的工作方式。如果您不希望声音自动播放,或者您只想在需要的时候播放声音,可以使用回调函数。

例如,

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

演示版

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

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

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

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

在场景中的任何位置单击时,您将听到爆炸声效果,如果按箭头键-左,右,上或下,它将播放爆炸声效果。

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

演示版

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

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

输出

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

没有声音的基本场景

您可以控制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为线性时使用,不适用于逆或指数。

带有空间声音的演示

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

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

将声音附加到网格

使用BABYLON.Sound,可以将声音附加到网格。如果网格正在移动,声音将随之移动。 AttachtoMesh(网格)是要使用的方法。

演示版

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

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

输出

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

空间3D声音

error: 内容受到保护 !!