Учебники

BabylonJS — Играющие звуки и музыка

Февраль 8, 2019

Без звука и музыки игра не завершена. Звуковой движок BabylonJS поставляется с API, который помогает добавлять звуковые эффекты в игру. Когда в игре виден бой, вам нужно выстрелить выстрелом, то же самое можно сделать и здесь, с помощью звукового движка babylonjs. Вы можете получить звуковой эффект на основе эффекта управления клавиатурой / мышью в играх. Звуковой двигатель предлагает окружающий звук, специализированный звук и направленный звук. Движок поддерживает форматы звука .mp3 и .wav.

Синтаксис 

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

параметры

Рассмотрим следующие параметры, связанные со звуковым движком —

  • Название — название звука.

  • URL — URL звука для воспроизведения.

  • Сцена — сцена, для которой должен воспроизводиться звук.

  • Callbackfunction — функция обратного вызова, которая вызывается, когда звук готов к воспроизведению. В настоящее время он является нулевым. Мы рассмотрим несколько примеров и узнаем, как их использовать.

  • Json объект — у этого объекта есть основные детали того, что должно быть сделано.

  • sound.autoplay — при этом звук воспроизводится автоматически после загрузки файла.

  • loop: true — это означает, что звук будет непрерывно воспроизводиться в цикле.

Название — название звука.

URL — URL звука для воспроизведения.

Сцена — сцена, для которой должен воспроизводиться звук.

Callbackfunction — функция обратного вызова, которая вызывается, когда звук готов к воспроизведению. В настоящее время он является нулевым. Мы рассмотрим несколько примеров и узнаем, как их использовать.

Json объект — у этого объекта есть основные детали того, что должно быть сделано.

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>

Выход

Выше строка кода генерирует следующий вывод —

Основная сцена без звука

Давайте теперь проверим, как работает функция обратного вызова . Если вы не хотите, чтобы звук воспроизводился автоматически, или вы хотите воспроизводить звук только тогда, когда вы этого хотите, вы можете сделать это с помощью функции обратного вызова.

Например, 

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 является линейным. Не используется с обратным или экспоненциальным.

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 (сетка) — метод, который будет использоваться.

демонстрация 

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

Выход

Выше строка кода генерирует следующий вывод —

60
Share: