BabylonJS - Ses ve Müzik Çalma

Ses ve müzik olmadan oyun eksiktir. BabylonJS ses motoru, oyuna ses efektleri eklemeye yardımcı olan bir API ile birlikte gelir. Oyunda bir kavga görüldüğünde, silah atışını yaptırmanız gerekir, aynısı burada babylonjs ses motoru ile yapılabilir. Oyunlara klavye / fare kontrolleri efektine göre ses efektini alabilirsiniz. Ses motoru ortam sesi, özel ses ve yönlü ses sunar. Motor, .mp3 ve .wav ses formatlarını destekler.

Sözdizimi

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

Parametreler

Ses motoruyla ilgili aşağıdaki parametreleri göz önünde bulundurun -

  • Name - Sesin adı.

  • URL - oynatılacak sesin url'si.

  • Scene - Sesin çalınması gereken sahne.

  • Callbackfunction- Ses çalınmaya hazır olduğunda çağrılan geri arama işlevi.Şu anda boş. Birkaç örnek üzerinden geçeceğiz ve nasıl kullanılacağını öğreneceğiz.

  • Json object - Bu nesne, yapılması gerekenin temel ayrıntılarına sahiptir.

  • sound.autoplay - Bununla, dosya indirildikten sonra ses otomatik olarak çalar.

  • loop:true - Bu, sesin sürekli bir döngü içinde çalacağı anlamına gelir.

Proje dizininizde ses klasörü oluşturun ve çıktıyı test etmek için herhangi bir örnek ses dosyasını indirin.

Şimdi oluşturduğumuz sahneye ses ekleyelim.

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>

Çıktı

Yukarıdaki kod satırı aşağıdaki çıktıyı üretir -

Şimdi nasıl olduğunu kontrol edelim callbackişlevi çalışır. Sesin otomatik olarak çalınmasını istemiyorsanız veya sesi yalnızca istediğiniz zaman çalmak istiyorsanız, bunu geri arama işlevi ile yapabilirsiniz.

Örneğin,

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>

Geri aramada setTimeout kullanacağız. Bu, sesin yalnızca belirli bir süre sonra çalınmasını istediğimiz anlamına gelir. Zamanlayıcı olarak 5s ekledik, böylece Scooby.wav dosyaları indirilip 5s tamamlandığında ses çalacak.

Klavyede tıklama ve tuşlarla sesler çalın

Sahnenin herhangi bir yerine tıkladığınızda, patlayıcı ses efekti duyacaksınız ve sol, sağ, yukarı veya aşağı ok tuşlarından herhangi birine basarsanız, patlayıcı ses efektini çalacaktır.

Tıklama için etkinliği ekliyoruz onmousedownpencereye ve anahtarlar için, keydown olayını kullanacağız. Anahtar koduna bağlı olarak ses çalınır.

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>

Çıktı

Yukarıdaki kod satırı aşağıdaki çıktıyı üretecektir -

Başlangıçta karşılaştığımız json nesnesindeki sesin seviyesini kontrol edebilirsiniz.

Örneğin,

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

Bir ses dosyasının ne zaman bittiğini bilmek için, aşağıdaki şekilde kullanılabilecek bir olay vardır -

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

SetVolume özelliği, yapıcının yanı sıra sesi de kontrol etmek istemeniz durumunda kullanılabilir.

Örneğin,

music.setVolume(volume);

Sahnenizde birden fazla ses çalıyorsanız, oluşturulan tüm sesler için global bir ses ayarlayabilirsiniz.

Örneğin,

BABYLON.Engine.audioEngine.setGlobalVolume(0.5);

Uzamsal 3B Ses Oluşturma

Sesi uzamsal sese dönüştürmek istiyorsanız (boşluk sesine benzer ses), ses oluşturucunuza seçenekler eklemeniz gerekir.

Örneğin,

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

Aşağıdakiler, uzaysal ses için farklı seçeneklerdir -

  • DistanceModel- Varsayılan olarak "doğrusal" bir denklem kullanıyor. Diğer seçenekler "ters" veya "üstel" dir.

  • MaxDistance - 100 olarak ayarlanmıştır. Bu, dinleyici sesten 100 birimden uzaklaştığında sesin 0 olacağı anlamına gelir. Sesi artık duyamazsınız.

  • PanningModel- "HRTF" olarak ayarlanmıştır. Spesifikasyon, insan deneklerinden ölçülen dürtü yanıtları ile bir evrişim kullanan daha yüksek kaliteli bir mekansalleştirme algoritması olduğunu söylüyor. Stereo çıkışı ifade eder.

  • MaxDistance - Sadece distanceModel doğrusal olduğunda kullanılır, ters veya üstel olarak kullanılmaz.

Uzamsal ses ile 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(
               "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>

Bir ağa ses eklemek

BABYLON.Sound'u kullanarak ağınıza ses ekleyebilirsiniz. Ağ hareket ediyorsa, ses de onunla birlikte hareket edecektir.AttachtoMesh (mesh) kullanılacak yöntemdir.

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>

Çıktı

Yukarıdaki kod satırı aşağıdaki çıktıyı üretir -

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