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