BabylonJS - Klänge und Musik spielen

Ohne Ton und Musik ist ein Spiel unvollständig. Die BabylonJS Sound Engine verfügt über eine API, mit der Sie dem Spiel Soundeffekte hinzufügen können. Wenn es einen Kampf im Spiel gibt, muss der Schuss abgefeuert werden. Dasselbe kann hier mit der Babylonjs Sound Engine erreicht werden. Sie können den Soundeffekt basierend auf dem Tastatur- / Maussteuerungseffekt für die Spiele erhalten. Die Sound Engine bietet Umgebungsgeräusche, Spezialgeräusche und Richtungsgeräusche. Die Engine unterstützt die Soundformate .mp3 und .wav.

Syntax

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

Parameter

Berücksichtigen Sie die folgenden Parameter für die Sound Engine:

  • Name - Name des Tons.

  • URL - URL des abzuspielenden Sounds.

  • Scene - Szene, zu der der Ton abgespielt werden muss.

  • Callbackfunction- Die Rückruffunktion, die aufgerufen wird, wenn der Sound wiedergegeben werden kann. Derzeit ist sie null. Wir werden einige Beispiele durchgehen und lernen, wie man es benutzt.

  • Json object - Dieses Objekt enthält grundlegende Details zu den erforderlichen Aktionen.

  • sound.autoplay - Damit wird der Sound automatisch abgespielt, sobald die Datei heruntergeladen wurde.

  • loop:true - Dies bedeutet, dass der Sound kontinuierlich in einer Schleife abgespielt wird.

Erstellen Sie einen Soundordner in Ihrem Projektverzeichnis und laden Sie eine Beispiel-Audiodatei herunter, um die Ausgabe zu testen.

Fügen wir nun der bereits erstellten Szene Sound hinzu.

Demo

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

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Lassen Sie uns nun überprüfen, wie die callbackFunktion funktioniert. Wenn Sie nicht möchten, dass der Sound automatisch wiedergegeben wird, oder wenn Sie den Sound nur dann wiedergeben möchten, wenn Sie möchten, können Sie dies mit der Rückruffunktion tun.

Zum Beispiel,

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

Demo

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

Im Rückruf verwenden wir setTimeout. Das heißt, wir möchten, dass der Sound erst nach einer bestimmten Zeit abgespielt wird. Wir haben 5s als Timer hinzugefügt, damit der Sound abgespielt wird, wenn die Dateien Scooby.wav heruntergeladen und 5s abgeschlossen sind.

Spielen Sie Sounds mit Klicks und Tasten auf der Tastatur ab

Wenn Sie auf eine beliebige Stelle in der Szene klicken, hören Sie einen explosiven Soundeffekt. Wenn Sie eine der Pfeiltasten nach links, rechts, oben oder unten drücken, wird der explosive Soundeffekt abgespielt.

Zum Klicken hängen wir das Ereignis an onmousedownZum Fenster und für Schlüssel verwenden wir das Keydown-Ereignis. Basierend auf dem Keycode wird der Sound abgespielt.

Demo

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

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Sie können die Lautstärke des Sounds im json-Objekt steuern, auf das wir am Anfang gestoßen sind.

Zum Beispiel,

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

Um zu wissen, wann eine Audiodatei fertig ist, gibt es ein Ereignis, das wie folgt verwendet werden kann:

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

Die SetVolume-Eigenschaft ist auch verfügbar, wenn Sie den Sound neben dem Konstruktor steuern möchten.

Zum Beispiel,

music.setVolume(volume);

Wenn Sie mehr als einen Sound in Ihrer Szene abspielen, können Sie einen globalen Sound für alle erstellten Sounds festlegen.

Zum Beispiel,

BABYLON.Engine.audioEngine.setGlobalVolume(0.5);

Erstellen eines räumlichen 3D-Sounds

Wenn Sie den Sound in räumlichen Sound konvertieren möchten (Sound ähnlich dem Space Sound), müssen Sie Ihrem Soundkonstruktor Optionen hinzufügen.

Zum Beispiel,

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

Im Folgenden sind die verschiedenen Optionen für räumlichen Klang aufgeführt:

  • DistanceModel- Standardmäßig wird eine „lineare“ Gleichung verwendet. Andere Optionen sind "invers" oder "exponentiell".

  • MaxDistance - Es ist auf 100 eingestellt. Dies bedeutet, dass die Lautstärke 0 beträgt, sobald der Hörer mehr als 100 Einheiten vom Ton entfernt ist. Sie können den Ton nicht mehr hören

  • PanningModel- Es ist auf "HRTF" eingestellt. Die Spezifikation besagt, dass es sich um einen höherwertigen Räumlichkeitsalgorithmus handelt, der eine Faltung mit gemessenen Impulsantworten von menschlichen Subjekten verwendet. Es bezieht sich auf den Stereoausgang.

  • MaxDistance - Es wird nur verwendet, wenn distanceModel linear ist. Es wird nicht mit invers oder exponentiell verwendet.

Demo mit räumlichem Sound

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

Anbringen eines Klangs an einem Netz

Mit BABYLON.Sound können Sie Ihrem Netz Sound hinzufügen. Wenn sich das Netz bewegt, bewegt sich der Ton mit.AttachtoMesh (mesh) ist die zu verwendende Methode.

Demo

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

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe: