没有声音和音乐，游戏就不完整了. BabylonJS声音引擎附带一个API，有助于为游戏添加声音效果.当在游戏中看到战斗时，你需要得到枪击，同样可以在这里用babylonjs声音引擎实现.您可以根据键盘/鼠标控制对游戏的效果获得声音效果.声音引擎提供环境声音，专门的声音和定向声音.引擎支持.mp3和.wav声音格式.
var music = new BABYLON.Sound(
"Music", "sound.wav", scene, null, {
loop: true,
autoplay: true
}
);考虑以下与声音引擎相关的参数 :
名称 : 声音的名称.
网址 : 要播放的声音的网址.
场景 : 必须播放声音的场景.
回调函数 : 当声音准备好播放时调用的回调函数.目前，它为空.我们将通过一些示例来学习如何使用它.
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。 这意味着，我们希望声音仅在特定时间后播放。 我们已经添加了5s作为计时器，因此当下载文件Scooby.wav并完成5s时声音将播放。
点击场景中的任何地方，您将听到爆炸性的声音效果，如果按任意箭头键 - 向左，向右，向上或向下，它将发挥爆炸性的声音效果。
对于click，我们将事件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>上面的代码行生成以下输出:
