BabylonJS - 播放声音和音乐

没有声音和音乐，游戏就不完整了. BabylonJS声音引擎附带一个API，有助于为游戏添加声音效果.当在游戏中看到战斗时，你需要得到枪击，同样可以在这里用babylonjs声音引擎实现.您可以根据键盘/鼠标控制对游戏的效果获得声音效果.声音引擎提供环境声音，专门的声音和定向声音.引擎支持.mp3和.wav声音格式.

语法

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

参数

考虑以下与声音引擎相关的参数 :

• 名称 : 声音的名称.

• 网址 : 要播放的声音的网址.

• 场景 : 必须播放声音的场景.

• 回调函数 : 当声音准备好播放时调用的回调函数.目前，它为空.我们将通过一些示例来学习如何使用它.

• Json对象 : 该对象具有需要完成的基本细节.

• sound.autoplay : 这样，一旦下载文件，声音就会自动播放.

• loop:true : 这意味着声音将在循环中连续播放.

在项目目录中创建声音文件夹并下载任何示例音频文件以测试输出.

现在让我们将声音添加到我们已创建的场景中.

演示

                                                         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();         });         

输出

上面的代码行生成以下输出:

现在让我们检查回调函数的工作原理。 如果您不希望声音自动播放或者您希望仅在需要时播放声音，则可以使用回调功能进行播放。

例如，

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

演示

                                                      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();         });         

在回调中，我们将使用setTimeout。 这意味着，我们希望声音仅在特定时间后播放。 我们已经添加了5s作为计时器，因此当下载文件Scooby.wav并完成5s时声音将播放。

Play sounds with clicks and keys on the keyboard

点击场景中的任何地方，您将听到爆炸性的声音效果，如果按任意箭头键 - 向左，向右，向上或向下，它将发挥爆炸性的声音效果。

对于click，我们将事件onmousedown附加到窗口，对于键，我们将使用keydown事件。 基于键码，播放声音。

演示

                                                      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();         });         

Output

上面的代码行将生成以下输出 −

您可以控制我们在开头遇到的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);

Creating a Spatial 3D Sound

如果要将声音转换为空间声音（声音类似于空间声音），则需要向声音构造函数添加选项。

例如，

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为线性时使用。它不用于反向或指数。

演示空间声音

                                                      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();         });         

将声音附加到网格上

使用BABYLON.Sound，您可以将声音附加到网格上。 如果网格正在移动，声音将随之移动。 AttachtoMesh（mesh）是要使用的方法。

演示

                                                      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();         });         

Output

上面的代码行生成以下输出: