BabylonJS - Jouer des sons et de la musique

Sans son et musique, un jeu est incomplet. Le moteur sonore BabylonJS est livré avec une API qui permet d'ajouter des effets sonores au jeu. Quand il y a un combat vu dans le jeu, vous devez obtenir le coup de feu, la même chose peut être obtenue ici avec le moteur sonore babylonjs. Vous pouvez obtenir l'effet sonore basé sur l'effet des commandes du clavier / souris pour les jeux. Le moteur sonore offre un son ambiant, un son spécialisé et un son directionnel. Le moteur prend en charge les formats audio .mp3 et .wav.

Syntaxe

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

Paramètres

Tenez compte des paramètres suivants liés au moteur sonore -

  • Name - Nom du son.

  • URL - URL du son à jouer.

  • Scene - Scène sur laquelle le son doit être joué.

  • Callbackfunction- La fonction de rappel qui est appelée lorsque le son est prêt à être joué. Actuellement, elle est nulle. Nous allons parcourir quelques exemples et apprendre à l'utiliser.

  • Json object - Cet objet contient des détails de base sur ce qui doit être fait.

  • sound.autoplay - Avec cela, le son est lu automatiquement une fois le fichier téléchargé.

  • loop:true - Cela signifie que le son jouera en boucle en continu.

Créez un dossier audio dans le répertoire de votre projet et téléchargez n'importe quel exemple de fichier audio pour tester la sortie.

Ajoutons maintenant du son à la scène que nous avons déjà créée.

Démo

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

Production

La ligne de code ci-dessus génère la sortie suivante -

Voyons maintenant comment le callbackla fonction fonctionne. Si vous ne souhaitez pas que le son soit lu automatiquement ou que vous ne souhaitez lire le son que lorsque vous le souhaitez, vous pouvez le faire avec la fonction de rappel.

Par exemple,

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

Démo

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

Dans le rappel, nous utiliserons setTimeout. Cela signifie que nous voulons que le son ne soit joué qu'après un certain temps. Nous y avons ajouté 5s comme minuterie, de sorte que le son sera lu lorsque les fichiers Scooby.wav seront téléchargés et que 5s seront terminés.

Jouez des sons avec des clics et des touches sur le clavier

En cliquant n'importe où sur la scène, vous entendrez un effet sonore explosif et si vous appuyez sur l'une des touches fléchées - gauche, droite, haut ou bas, il jouera l'effet sonore explosif.

Pour cliquer, nous attachons l'événement onmousedownà la fenêtre et pour les clés, nous utiliserons l'événement keydown. Basé sur le code clé, le son est joué.

Démo

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

Production

La ligne de code ci-dessus générera la sortie suivante -

Vous pouvez contrôler le volume du son dans l'objet json, que nous avons rencontré au début.

Par exemple,

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

Pour savoir quand un fichier son est terminé, il existe un événement qui peut être utilisé comme suit -

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

La propriété SetVolume est également disponible au cas où vous souhaiteriez contrôler le son en plus du constructeur.

Par exemple,

music.setVolume(volume);

Si vous jouez plus d'un son dans votre scène, vous pouvez définir un son global pour tous les sons créés.

Par exemple,

BABYLON.Engine.audioEngine.setGlobalVolume(0.5);

Création d'un son 3D spatial

Si vous souhaitez convertir le son en son spatial (son similaire au son spatial), vous devez ajouter des options à votre constructeur sonore.

Par exemple,

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

Voici les différentes options pour le son spatial -

  • DistanceModel- Il utilise une équation «linéaire» par défaut. D'autres options sont «inverses» ou «exponentielles».

  • MaxDistance - Il est réglé sur 100. Cela signifie qu'une fois que l'auditeur est à plus de 100 unités du son, le volume sera de 0. Vous ne pouvez plus entendre le son

  • PanningModel- Il est réglé sur «HRTF». La spécification indique qu'il s'agit d'un algorithme de spatialisation de meilleure qualité utilisant une convolution avec des réponses impulsionnelles mesurées de sujets humains. Il fait référence à la sortie stéréo.

  • MaxDistance - Il n'est utilisé que lorsque distanceModel est linéaire.Il n'est pas utilisé avec inverse ou exponentiel.

Démo avec son spatial

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

Attacher du son à un maillage

Avec BABYLON.Sound, vous pouvez attacher du son à votre mesh. Si le maillage se déplace, le son se déplacera avec lui.AttachtoMesh (mesh) est la méthode à utiliser.

Démo

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

Production

La ligne de code ci-dessus génère la sortie suivante -

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