Babylonjs-playing-sounds-and-music

提供：Dev Guides
移動先:案内、検索

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

音と音楽がなければ、ゲームは不完全です。 BabylonJSサウンドエンジンには、ゲームにサウンドエフェクトを追加するのに役立つAPIが付属しています。 ゲームで戦闘が発生した場合、銃声を発する必要があります。これは、babylonjsサウンドエンジンを使用してここでも達成できます。 ゲームのキーボード/マウスコントロールの効果に基づいてサウンド効果を取得できます。 サウンドエンジンは、アンビエントサウンド、特殊サウンド、指向性サウンドを提供します。 エンジンは.m​​p3および.wavサウンド形式をサポートしています。

構文

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

パラメーター

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

  • 名前-サウンドの名前。
  • URL -再生されるサウンドのURL。
  • シーン-サウンドを再生するシーン。
  • Callbackfunction -サウンドを再生する準備ができたときに呼び出されるコールバック関数。現在、nullです。 いくつかの例を見て、その使用方法を学びます。
  • * Jsonオブジェクト*-このオブジェクトには、実行する必要があるものの基本的な詳細があります。
  • sound.autoplay -これにより、ファイルがダウンロードされるとサウンドが自動的に再生されます。
  • loop：true -これは、サウンドがループで連続して再生されることを意味します。

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

すでに作成したシーンにサウンドを追加しましょう。

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>

出力

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

音のない基本シーン 

*callback* 関数がどのように機能するかを確認しましょう。 サウンドを自動再生したくない場合、または必要なときにのみサウンドを再生する場合は、コールバック関数を使用して実行できます。

例えば、 

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>

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

キーボードのクリックとキーで音を鳴らす

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

クリックのために、イベントを onmousedown にウィンドウにアタッチし、キーのために、keydownイベントを使用します。 キーコードに基づいて、サウンドが再生されます。

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>

出力

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

音のない基本シーン

最初に出会った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）*は使用する方法です。

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>

出力

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

Spatial 3D Sound

「https://www.finddevguides.com/index.php?title=Babylonjs-playing-sounds-and-music&oldid=35078」から取得
Powered by MediaWiki