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>

输出

上述代码行生成以下输出 −

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

例如，

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("soundended");

//您可以在此处执行所需的操作，例如再次播放或播放其他声音等。
};

如果您想要除了构造函数之外控制声音，也可以使用 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 (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>

输出

上面这行代码生成以下输出 −

BabylonJS 教程

BabylonJS 有用资源

BabylonJS - 播放声音和音乐

语法

参数

演示

输出

演示

使用键盘上的点击和按键播放声音

演示

输出

创建空间 3D 声音

带有空间声音的演示

将声音附加到网格

演示

输出

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！