BabylonJS - การเล่นเสียงและดนตรี

หากไม่มีเสียงและดนตรีแสดงว่าเกมไม่สมบูรณ์ เครื่องเสียง BabylonJS มาพร้อมกับ API ที่ช่วยเพิ่มเอฟเฟกต์เสียงให้กับเกม เมื่อมีการต่อสู้ที่เห็นในเกมคุณต้องได้รับการยิงกระสุนปืนสิ่งเดียวกันนี้สามารถทำได้ด้วยเครื่องเสียงของ babylonjs คุณสามารถรับเอฟเฟกต์เสียงตามเอฟเฟกต์การควบคุมแป้นพิมพ์ / เมาส์ของเกม เครื่องเสียงให้เสียงรอบข้างเสียงพิเศษและเสียงทิศทาง เครื่องยนต์รองรับรูปแบบเสียง. mp3 และ. wav

ไวยากรณ์

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

พารามิเตอร์

พิจารณาพารามิเตอร์ต่อไปนี้ที่เกี่ยวข้องกับเอ็นจิ้นเสียง -

  • Name - ชื่อของเสียง

  • URL - url ของเสียงที่จะเล่น

  • Scene - ฉากที่ต้องเล่นเสียง

  • Callbackfunction- ฟังก์ชั่นการโทรกลับซึ่งจะเรียกเมื่อเสียงพร้อมที่จะเล่นปัจจุบันเป็นโมฆะ เราจะดูตัวอย่างบางส่วนและเรียนรู้วิธีการใช้งาน

  • Json object - วัตถุนี้มีรายละเอียดพื้นฐานของสิ่งที่ต้องทำ

  • 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 ซึ่งหมายความว่าเราต้องการให้เล่นเสียงหลังจากเวลาที่กำหนดเท่านั้น เราได้เพิ่ม 5s เป็นตัวจับเวลาดังนั้นเสียงจะเล่นเมื่อดาวน์โหลดไฟล์ Scooby.wav และ 5s เสร็จสมบูรณ์

เล่นเสียงด้วยการคลิกและปุ่มบนแป้นพิมพ์

เมื่อคลิกที่ใดก็ได้ในฉากคุณจะได้ยินเสียงเอฟเฟกต์ระเบิดและหากคุณกดปุ่มลูกศรใด ๆ - ซ้ายขวาขึ้นหรือลงมันจะเล่นเอฟเฟกต์เสียงระเบิด

สำหรับคลิกเรากำลังแนบเหตุการณ์ onmousedownไปที่หน้าต่างและสำหรับคีย์เราจะใช้เหตุการณ์คีย์ดาวน์ เสียงจะเล่นตามรหัสคีย์

การสาธิต

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

การสร้างเสียง 3 มิติเชิงพื้นที่

หากคุณต้องการแปลงเสียงเป็นเสียงเชิงพื้นที่ (เสียงคล้ายกับเสียงอวกาศ) คุณต้องเพิ่มตัวเลือกให้กับตัวสร้างเสียงของคุณ

ตัวอย่างเช่น,

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

ต่อไปนี้เป็นตัวเลือกต่างๆสำหรับเสียงเชิงพื้นที่ -

  • DistanceModel- มันใช้สมการ "เชิงเส้น" ตามค่าเริ่มต้น ตัวเลือกอื่น ๆ ได้แก่ "ผกผัน" หรือ "เลขชี้กำลัง"

  • MaxDistance - ตั้งค่าเป็น 100 ซึ่งหมายความว่าเมื่อผู้ฟังอยู่ห่างจากเสียงมากกว่า 100 หน่วยความดังจะเป็น 0 คุณจะไม่ได้ยินเสียงอีกต่อไป

  • PanningModel- ตั้งค่าเป็น“ HRTF” ข้อกำหนดระบุว่าเป็นอัลกอริธึมการจัดพื้นที่เชิงพื้นที่ที่มีคุณภาพสูงขึ้นโดยใช้ Convolution พร้อมการตอบสนองแรงกระตุ้นที่วัดได้จากอาสาสมัครที่เป็นมนุษย์ หมายถึงเอาต์พุตสเตอริโอ

  • 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 คุณสามารถแนบเสียงกับตาข่ายของคุณได้ ถ้าตาข่ายขยับเสียงก็จะเคลื่อนที่ตามไปด้วย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>

เอาต์พุต

บรรทัดโค้ดด้านบนสร้างผลลัพธ์ต่อไปนี้ -