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- Функция обратного вызова, которая вызывается, когда звук готов к воспроизведению. В настоящее время она пуста. Мы рассмотрим несколько примеров и узнаем, как его использовать.

  • 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);

Создание пространственного трехмерного звука

Если вы хотите преобразовать звук в пространственный звук (звук, похожий на космический звук), вам необходимо добавить параметры в свой звуковой конструктор.

Например,

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