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− 사운드를 재생할 준비가되었을 때 호출되는 콜백 함수로 현재는 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을 사용합니다. 즉, 특정 시간 후에 만 ​​사운드가 재생되기를 원합니다. 5 초를 타이머로 추가 했으므로 Scooby.wav 파일이 다운로드되고 5 초가 완료되면 사운드가 재생됩니다.

키보드의 클릭 및 키로 사운드 재생

장면의 아무 곳이나 클릭하면 폭발음이 들리고 왼쪽, 오른쪽, 위, 아래 화살표 키 중 하나를 누르면 폭발음 효과가 재생됩니다.

클릭을 위해 이벤트를 첨부합니다 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 - 2024 | All Rights Reserved