BabylonJS - Odtwarzanie dźwięków i muzyki

Bez dźwięku i muzyki gra jest niekompletna. Silnik dźwiękowy BabylonJS jest wyposażony w API, które pomaga dodawać efekty dźwiękowe do gry. Kiedy w grze widać walkę, musisz uzyskać wystrzał z broni palnej, to samo można osiągnąć tutaj z silnikiem dźwiękowym Babylonjs. W grach można uzyskać efekt dźwiękowy oparty na sterowaniu klawiaturą / myszą. Silnik dźwiękowy oferuje dźwięk otoczenia, dźwięk specjalistyczny i dźwięk kierunkowy. Silnik obsługuje formaty dźwięku .mp3 i .wav.

Składnia

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

Parametry

Rozważ następujące parametry związane z silnikiem dźwiękowym -

  • Name - Nazwa dźwięku.

  • URL - adres URL odtwarzanego dźwięku.

  • Scene - Scena, do której ma zostać odtworzony dźwięk.

  • Callbackfunction- Funkcja wywołania zwrotnego, która jest wywoływana, gdy dźwięk jest gotowy do odtworzenia, obecnie jest zerowa. Przejdziemy przez kilka przykładów i nauczymy się go używać.

  • Json object - Ten obiekt zawiera podstawowe informacje o tym, co należy zrobić.

  • sound.autoplay - Dzięki temu dźwięk jest odtwarzany automatycznie po pobraniu pliku.

  • loop:true - Oznacza to, że dźwięk będzie odtwarzany w sposób ciągły w pętli.

Utwórz folder dźwiękowy w katalogu projektu i pobierz dowolny przykładowy plik audio, aby przetestować wyjście.

Dodajmy teraz dźwięk do utworzonej już sceny.

Próbny

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

Wynik

Powyższy wiersz kodu generuje następujące dane wyjściowe -

Sprawdźmy teraz, jak callbackfunkcja działa. Jeśli nie chcesz, aby dźwięk odtwarzał się automatycznie lub chcesz odtwarzać dźwięk tylko wtedy, gdy chcesz, możesz to zrobić za pomocą funkcji oddzwaniania.

Na przykład,

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

Próbny

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

W wywołaniu zwrotnym użyjemy setTimeout. Oznacza to, że chcemy, aby dźwięk był odtwarzany dopiero po określonym czasie. Dodaliśmy do niego 5s jako licznik czasu, więc dźwięk będzie odtwarzany po pobraniu plików Scooby.wav i zakończeniu 5s.

Odtwarzaj dźwięki za pomocą kliknięć i klawiszy na klawiaturze

Po kliknięciu w dowolnym miejscu sceny usłyszysz wybuchowy efekt dźwiękowy, a jeśli naciśniesz którykolwiek z klawiszy strzałek - w lewo, w prawo, w górę lub w dół, odtworzy się wybuchowy efekt dźwiękowy.

W przypadku kliknięcia załączamy wydarzenie onmousedowndo okna i dla kluczy użyjemy zdarzenia keydown. Dźwięk jest odtwarzany na podstawie kodu klucza.

Próbny

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

Wynik

Powyższy wiersz kodu wygeneruje następujące dane wyjściowe -

Możesz kontrolować głośność dźwięku w obiekcie json, z którym spotkaliśmy się na początku.

Na przykład,

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

Aby wiedzieć, kiedy plik dźwiękowy się skończył, istnieje zdarzenie, którego można użyć w następujący sposób -

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

Właściwość SetVolume jest również dostępna w przypadku, gdy chcesz sterować dźwiękiem poza konstruktorem.

Na przykład,

music.setVolume(volume);

Jeśli grasz więcej niż jeden dźwięk w swojej scenie, możesz ustawić dźwięk globalny dla wszystkich utworzonych dźwięków.

Na przykład,

BABYLON.Engine.audioEngine.setGlobalVolume(0.5);

Tworzenie przestrzennego dźwięku 3D

Jeśli chcesz przekonwertować dźwięk na dźwięk przestrzenny (dźwięk podobny do dźwięku przestrzennego), musisz dodać opcje do swojego konstruktora dźwięku.

Na przykład,

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

Poniżej przedstawiono różne opcje dźwięku przestrzennego -

  • DistanceModel- Domyślnie używa równania „liniowego”. Inne opcje to „odwrotne” lub „wykładnicze”.

  • MaxDistance - Ustawiono na 100. Oznacza to, że gdy słuchacz znajduje się dalej niż 100 jednostek od dźwięku, głośność wyniesie 0. Nie słychać już dźwięku.

  • PanningModel- Jest ustawiony na „HRTF”. Specyfikacja mówi, że jest to algorytm uprzestrzenniania wyższej jakości, wykorzystujący splot z mierzonymi odpowiedziami impulsowymi od ludzi. Odnosi się do wyjścia stereo.

  • MaxDistance - Jest używany tylko wtedy, gdy distanceModel jest liniowy i nie jest używany z odwrotnością ani wykładniczą.

Demo z dźwiękiem przestrzennym

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

Mocowanie dźwięku do siatki

Używając BABYLON.Sound, możesz dołączyć dźwięk do swojej siatki. Jeśli siatka się porusza, dźwięk będzie się poruszał wraz z nią.AttachtoMesh (mesh) jest metodą, którą należy zastosować.

Próbny

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

Wynik

Powyższy wiersz kodu generuje następujące dane wyjściowe -

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