made audio playing system so there's always a spare element to play

This commit is contained in:
Richard Harrington 2013-09-10 21:29:20 -04:00
parent 4f6957952d
commit c0e14b8334
2 changed files with 36 additions and 35 deletions

View File

@ -21,26 +21,6 @@
<input id="programsInput" type="text" autofocus></input>
<canvas id="canvas" width="600" height="600"></canvas>
</div>
<audio id="shotSound1" preload="auto">
<source src="audio/trprsht1.ogg" type="audio/ogg">
<source src="audio/trprsht1.mp3" type="audio/mp3">
</audio>
<audio id="shotSound2" preload="auto">
<source src="audio/trprsht1.ogg" type="audio/ogg">
<source src="audio/trprsht1.mp3" type="audio/mp3">
</audio>
<audio id="shotSound3" preload="auto">
<source src="audio/trprsht1.ogg" type="audio/ogg">
<source src="audio/trprsht1.mp3" type="audio/mp3">
</audio>
<audio id="shotSound4" preload="auto">
<source src="audio/trprsht1.ogg" type="audio/ogg">
<source src="audio/trprsht1.mp3" type="audio/mp3">
</audio>
<audio id="shotSound5" preload="auto">
<source src="audio/trprsht1.ogg" type="audio/ogg">
<source src="audio/trprsht1.mp3" type="audio/mp3">
</audio>
<script src="js/main.js"></script>
</body>
</html>

View File

@ -6,6 +6,13 @@
var FPS = 60;
var ROBOT_COLORS = ["#fa2d0b", "#0bfaf7", "#faf20b", "#e312f0", "#4567fb"];
var SHELL_COLOR = "#ffffff";
var SOUNDS = {
shellRelease: {
oggSrc: "audio/trprsht1.ogg",
mp3Src: "audio/trprsht1.mp3",
numInstances: 40
}
};
var Geom = (function() {
var degreesToRadians = function(angle) {
@ -92,7 +99,33 @@
}
}
var Animation = function(el, sounds, gameInfo) {
function SoundPlayer(attributes) {
var oggSrc = attributes.oggSrc;
var mp3Src = attributes.mp3Src;
var numInstances = attributes.numInstances;
var soundIdx = 0;
var src = (new Audio().canPlayType("audio/ogg")) ? oggSrc : mp3Src;
var els = [];
for (var i = 0; i < numInstances; i++) {
els.push(new Audio(src));
}
return {
play: function() {
els[soundIdx].play();
soundIdx = (soundIdx + 1) % numInstances;
}
};
}
function Animation(el, sounds, gameInfo) {
var soundPlayers = {};
for (var k in sounds) {
if (sounds.hasOwnProperty(k)) {
soundPlayers[k] = new SoundPlayer(sounds[k]);
}
}
var width = parseInt(el.width);
var height = parseInt(el.height);
var roomForRobots = gameInfo.robotRadius * 2;
@ -126,17 +159,6 @@
var ctx = el.getContext('2d');
ctx.lineCap = 'square';
var nextSoundEl = (function() {
var i = 0;
return {
get: function() {
var el = sounds[i];
i = (i + 1) % 5;
return el;
}
}
})();
// TODO: this whole drawing section is kind of hacky. reorganize
// the behaviors of these functions to be less redundant,
// and more abstracted.
@ -218,7 +240,7 @@
});
if (currentWorld["next-shell-id"] !== previousWorld["next-shell-id"]) {
nextSoundEl.get().play();
soundPlayers.shellRelease.play();
}
}
@ -253,9 +275,8 @@
var frameDuration = parseInt (1000 / FPS);
var canvasEl = $('#canvas')[0];
var sounds = $('audio');
var animation = new Animation(canvasEl, sounds, gameInfo);
var animation = new Animation(canvasEl, SOUNDS, gameInfo);
// TODO: remove this tick loop entirely,
// and just have the animation loop calculate which