BabylonJS-サウンドと音楽の再生

音と音楽がなければ、ゲームは不完全です。BabylonJSサウンドエンジンには、ゲームに効果音を追加するのに役立つAPIが付属しています。ゲームで見られる戦いがあるとき、あなたは銃声を発砲させる必要があります、同じことがここでbabylonjsサウンドエンジンで達成することができます。ゲームのキーボード/マウスコントロール効果に基づいた効果音を得ることができます。サウンドエンジンは、アンビエントサウンド、特殊なサウンド、および指向性サウンドを提供します。エンジンは、.mp3および.wavサウンド形式をサポートします。

構文

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

パラメーター

サウンドエンジンに関連する次のパラメータを考慮してください-

  • Name −音の名前。

  • URL −再生するサウンドのURL。

  • Scene −サウンドを再生する必要のあるシーン。

  • Callbackfunction−サウンドを再生する準備ができたときに呼び出されるcallbackfunction。現在、nullです。いくつかの例を見て、その使用方法を学びます。

  • Json object −このオブジェクトには、実行する必要があることの基本的な詳細が含まれています。

  • sound.autoplay −これにより、ファイルがダウンロードされるとサウンドが自動的に再生されます。

  • loop:true −これは、サウンドがループで継続的に再生されることを意味します。

プロジェクトディレクトリにサウンドフォルダを作成し、サンプルオーディオファイルをダウンロードして出力をテストします。

作成済みのシーンにサウンドを追加しましょう。

デモ

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

出力

上記のコード行は、次の出力を生成します-

では、どのように callback機能は動作します。サウンドを自動再生したくない場合、または必要なときにだけサウンドを再生したい場合は、コールバック関数を使用して行うことができます。

例えば、

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

デモ

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

コールバックでは、setTimeoutを使用します。つまり、特定の時間の後にのみサウンドを再生する必要があります。タイマーとして5sを追加したので、Scooby.wavファイルがダウンロードされて5sが完了すると、サウンドが再生されます。

キーボードのクリックとキーでサウンドを再生する

シーンの任意の場所をクリックすると、爆発的な効果音が聞こえます。矢印キー（左、右、上、または下）のいずれかを押すと、爆発的な効果音が再生されます。

クリックの場合は、イベントを添付します onmousedownウィンドウとキーには、keydownイベントを使用します。キーコードに基づいて、サウンドが再生されます。

デモ

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

出力

上記のコード行は、次の出力を生成します-

最初に遭遇したjsonオブジェクトのサウンドの音量を制御できます。

例えば、

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

サウンドファイルがいつ終了したかを知るために、次のように使用できるイベントがあります-

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プロパティは、コンストラクター以外のサウンドを制御する場合にも使用できます。

例えば、

music.setVolume(volume);

シーンで複数のサウンドを再生している場合は、作成されたすべてのサウンドにグローバルサウンドを設定できます。

例えば、

BABYLON.Engine.audioEngine.setGlobalVolume(0.5);

空間3Dサウンドの作成

サウンドを空間サウンド（空間サウンドに似たサウンド）に変換する場合は、サウンドコンストラクターにオプションを追加する必要があります。

例えば、

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

以下は、空間サウンドのさまざまなオプションです。

  • DistanceModel−デフォルトでは「線形」方程式を使用しています。他のオプションは「逆」または「指数」です。

  • MaxDistance − 100に設定されています。これは、リスナーがサウンドから100ユニット以上離れると、音量が0になることを意味します。サウンドは聞こえなくなります。

  • PanningModel−「HRTF」に設定されています。仕様によると、これは、被験者からのインパルス応答を測定した畳み込みを使用した、より高品質の空間化アルゴリズムです。ステレオ出力を指します。

  • MaxDistance − distanceModelが線形の場合にのみ使用されます。逆または指数では、使用されません。

空間音によるデモ

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

メッシュに音を付ける

BABYLON.Soundを使用すると、メッシュにサウンドをアタッチできます。メッシュが動いている場合、音も一緒に動きます。AttachtoMesh (mesh) 使用する方法です。

デモ

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

出力

上記のコード行は、次の出力を生成します-

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 - 2025 | All Rights Reserved