BabylonJS - Phát âm thanh và âm nhạc

Nếu không có âm thanh và âm nhạc, một trò chơi sẽ không hoàn chỉnh. Công cụ âm thanh BabylonJS đi kèm với một API giúp thêm hiệu ứng âm thanh vào trò chơi. Khi có một cuộc chiến được thấy trong trò chơi, bạn cần phải nổ súng, điều tương tự cũng có thể đạt được ở đây với công cụ âm thanh babylonjs. Bạn có thể nhận được hiệu ứng âm thanh dựa trên hiệu ứng điều khiển bàn phím / chuột trong trò chơi. Động cơ âm thanh cung cấp âm thanh xung quanh, âm thanh chuyên biệt và âm thanh định hướng. Công cụ hỗ trợ các định dạng âm thanh .mp3 và .wav.

Cú pháp

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

Thông số

Xem xét các thông số sau liên quan đến động cơ âm thanh:

  • Name - Tên của âm thanh.

  • URL - url của âm thanh sẽ được phát.

  • Scene - Cảnh mà âm thanh phải được phát.

  • Callbackfunction- Chức năng gọi lại được gọi khi âm thanh đã sẵn sàng để phát, hiện tại, nó là rỗng. Chúng ta sẽ đi qua một vài ví dụ và tìm hiểu cách sử dụng nó.

  • Json object - Đối tượng này có các chi tiết cơ bản về những gì cần phải làm.

  • sound.autoplay - Với tính năng này, âm thanh sẽ tự động phát sau khi tệp được tải xuống.

  • loop:true - Điều này có nghĩa là âm thanh sẽ liên tục phát trong một vòng lặp.

Tạo thư mục âm thanh trong thư mục dự án của bạn và tải xuống bất kỳ tệp âm thanh mẫu nào để kiểm tra đầu ra.

Bây giờ chúng ta hãy thêm âm thanh vào cảnh mà chúng ta đã tạo.

Bản giới thiệu

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

Đầu ra

Dòng mã trên tạo ra kết quả sau:

Bây giờ hãy để chúng tôi kiểm tra cách callbackchức năng hoạt động. Nếu bạn không muốn âm thanh tự động phát hoặc bạn chỉ muốn phát âm thanh khi bạn muốn, bạn có thể làm như vậy với chức năng gọi lại.

Ví dụ,

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

Bản giới thiệu

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

Trong cuộc gọi lại, chúng tôi sẽ sử dụng setTimeout. Điều này có nghĩa là, chúng tôi muốn âm thanh chỉ được phát sau một thời gian cụ thể. Chúng tôi đã thêm 5s làm bộ đếm thời gian cho nó, vì vậy âm thanh sẽ phát khi tệp Scooby.wav được tải xuống và 5 giây hoàn tất.

Phát âm thanh bằng cách nhấp và phím trên bàn phím

Khi nhấp vào bất kỳ đâu trên cảnh, bạn sẽ nghe thấy hiệu ứng âm thanh bùng nổ và nếu bạn nhấn bất kỳ phím mũi tên nào - trái, phải, lên hoặc xuống, nó sẽ phát hiệu ứng âm thanh bùng nổ.

Đối với nhấp chuột, chúng tôi đang đính kèm sự kiện onmousedownđối với cửa sổ và đối với các phím, chúng tôi sẽ sử dụng sự kiện keydown. Dựa trên mã khóa, âm thanh được phát.

Bản giới thiệu

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

Đầu ra

Dòng mã trên sẽ tạo ra kết quả sau:

Bạn có thể kiểm soát âm lượng của âm thanh trong đối tượng json mà chúng ta đã gặp ở phần đầu.

Ví dụ,

Var music = new BABYLON.Sound("sound", "sounds/scooby.wav", scene, null, { 
   loop: true, 
   autoplay: true, 
   volume:0.5 
});

Để biết khi nào tệp âm thanh kết thúc, có một sự kiện có thể được sử dụng như sau:

music.onended = function () {	
   console.log("sound ended");
   
   //you can do the required stuff here like play it again or play some other sound etc.
};

Thuộc tính SetVolume cũng có sẵn trong trường hợp bạn muốn điều khiển âm thanh bên cạnh hàm tạo.

Ví dụ,

music.setVolume(volume);

Nếu bạn đang phát nhiều âm thanh trong cảnh của mình, bạn có thể đặt âm thanh chung cho tất cả các âm thanh đã tạo.

Ví dụ,

BABYLON.Engine.audioEngine.setGlobalVolume(0.5);

Tạo âm thanh 3D không gian

Nếu bạn muốn chuyển đổi âm thanh sang âm thanh không gian (âm thanh tương tự như âm thanh không gian), bạn cần thêm các tùy chọn vào trình tạo âm thanh của mình.

Ví dụ,

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

Sau đây là các tùy chọn khác nhau cho âm thanh không gian:

  • DistanceModel- Nó đang sử dụng một phương trình "tuyến tính" theo mặc định. Các tùy chọn khác là "nghịch đảo" hoặc "hàm mũ".

  • MaxDistance - Nó được đặt thành 100. Điều này có nghĩa là khi người nghe ở xa hơn 100 đơn vị âm thanh, âm lượng sẽ bằng 0. Bạn không thể nghe thấy âm thanh nữa

  • PanningModel- Nó được đặt thành “HRTF”. Thông số kỹ thuật cho biết đó là một thuật toán không gian chất lượng cao hơn sử dụng một phép chập với các phản ứng xung được đo từ các đối tượng con người. Nó đề cập đến đầu ra âm thanh nổi.

  • MaxDistance - Nó chỉ được sử dụng khi distanceModel là tuyến tính, nó không được sử dụng với nghịch đảo hoặc hàm mũ.

Demo với âm thanh không gian

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

Gắn âm thanh vào lưới

Sử dụng BABYLON.Sound, bạn có thể gắn âm thanh vào lưới của mình. Nếu lưới chuyển động, âm thanh sẽ di chuyển cùng với nó.AttachtoMesh (mesh) là phương pháp được sử dụng.

Bản giới thiệu

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

Đầu ra

Dòng mã trên tạo ra kết quả sau:

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved