BabylonJS - Riproduzione di suoni e musica

Senza suono e musica, un gioco è incompleto. Il motore sonoro BabylonJS viene fornito con un'API che aiuta ad aggiungere effetti sonori al gioco. Quando si vede un combattimento nel gioco, è necessario far sparare il colpo di pistola, lo stesso può essere ottenuto qui con il motore audio babylonjs. È possibile ottenere l'effetto sonoro in base all'effetto dei controlli della tastiera / del mouse nei giochi. Il motore del suono offre suono ambientale, suono specializzato e suono direzionale. Il motore supporta i formati audio .mp3 e .wav.

Sintassi

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

Parametri

Considera i seguenti parametri relativi al motore del suono:

  • Name - Nome del suono.

  • URL - url del suono da riprodurre.

  • Scene - Scena in cui deve essere riprodotto il suono.

  • Callbackfunction- La funzione di callback che viene chiamata quando il suono è pronto per essere riprodotto. Al momento è nulla. Passeremo attraverso alcuni esempi e impareremo come usarlo.

  • Json object - Questo oggetto ha i dettagli di base di ciò che deve essere fatto.

  • sound.autoplay - Con questo, il suono viene riprodotto automaticamente una volta scaricato il file.

  • loop:true - Ciò significa che il suono verrà riprodotto continuamente in un loop.

Crea una cartella audio nella directory del tuo progetto e scarica qualsiasi file audio di esempio per testare l'output.

Aggiungiamo ora il suono alla scena che abbiamo già creato.

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>

Produzione

La riga di codice sopra genera il seguente output:

Vediamo ora come il file callbackla funzione funziona. Se non vuoi che il suono venga riprodotto automaticamente o desideri riprodurlo solo quando vuoi, puoi farlo con la funzione di richiamata.

Per esempio,

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>

Nella richiamata, useremo setTimeout. Ciò significa che vogliamo che il suono venga riprodotto solo dopo un tempo specifico. Abbiamo aggiunto 5s come timer ad esso, quindi il suono verrà riprodotto quando i file Scooby.wav vengono scaricati e 5s completi.

Riproduci suoni con clic e tasti sulla tastiera

Facendo clic in un punto qualsiasi della scena, sentirai un effetto sonoro esplosivo e se premi uno dei tasti freccia -sinistra, destra, su o giù, verrà riprodotto l'effetto sonoro esplosivo.

Per il clic, alleghiamo l'evento onmousedownalla finestra e per le chiavi, useremo l'evento keydown. In base al codice chiave, il suono viene riprodotto.

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>

Produzione

La riga di codice precedente genererà il seguente output:

Puoi controllare il volume del suono nell'oggetto json, che abbiamo incontrato all'inizio.

Per esempio,

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

Per sapere quando un file audio è finito, c'è un evento che può essere utilizzato come segue:

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 proprietà SetVolume è disponibile anche nel caso in cui si desideri controllare il suono oltre al costruttore.

Per esempio,

music.setVolume(volume);

Se stai riproducendo più di un suono nella scena, puoi impostare un suono globale per tutti i suoni creati.

Per esempio,

BABYLON.Engine.audioEngine.setGlobalVolume(0.5);

Creazione di un suono 3D spaziale

Se vuoi convertire il suono in suono spaziale (suono simile al suono spaziale), devi aggiungere opzioni al tuo costruttore di suoni.

Per esempio,

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

Di seguito sono riportate le diverse opzioni per il suono spaziale:

  • DistanceModel- Per impostazione predefinita utilizza un'equazione "lineare". Altre opzioni sono "inversa" o "esponenziale".

  • MaxDistance - È impostato su 100. Ciò significa che una volta che l'ascoltatore si trova a più di 100 unità dal suono, il volume sarà 0. Non puoi più sentire il suono

  • PanningModel- È impostato su "HRTF". La specifica dice che si tratta di un algoritmo di spazializzazione di qualità superiore che utilizza una convoluzione con risposte all'impulso misurate da soggetti umani. Si riferisce all'uscita stereo.

  • MaxDistance - Viene utilizzato solo quando distanceModel è lineare, non viene utilizzato con inversa o esponenziale.

Demo con suono spaziale

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

Collegamento del suono a una rete

Utilizzando BABYLON.Sound, puoi allegare il suono alla tua mesh. Se la maglia si muove, il suono si muoverà con essa.AttachtoMesh (mesh) è il metodo da utilizzare.

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>

Produzione

La riga di codice sopra genera il seguente output:

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